Icons
The icon system used in the DESIGN SYSTEM coding project will be powered by an icon font. This system offers several advantages:
- Scalability: SVG icons can easily be scaled to any size without losing quality, ensuring crisp and clear visuals on any device or screen resolution. Icons color or stroke width may also be easily altered using CSS instead of having multiple files for each icon.
- Performance: Every icons is contained is a single SVG file, reducing page load times and improving overall performance.
<link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-regular.css"><link rel="stylesheet" href="https://webcdn.ringover.com/app/img/icons/lts/ro-icons-solid.css">
...<i class="ro-icon ro-icon-rocket ro-size-xl"></i>
<button class="ro-btn ro-shape-icon"> <i class="ro-icon ro-icon-rocket ro-size-xl"></i></button>Available Sizes
| Class | Value | Token |
|---|---|---|
.ro-size-sm | 12px | --ro-icon-size-sm |
.ro-size-md | 16px | --ro-icon-size-base (Default) |
.ro-size-lg | 20px | --ro-icon-size-lg |
.ro-size-xl | 24px | --ro-icon-size-xl |
.ro-size-2xl | 32px | --ro-icon-size-2xl |
.ro-size-3xl | 48px | --ro-icon-size-3xl |
.ro-size-4xl | 64px | --ro-icon-size-4xl |
v1.25.1