Reno: icons

Tips for adding new icons

Please use svgo to clean up your svg file first.
Put your svg file in reno-icons.svg wrapped by <symbol>
Named a symbol appropriately. Its name will be used as an icon name.
Symbols are used to generate a special icon font.

Naming

All icons are named like reno-icon-abc, which means that:

#reno-icon-abc — a symbol name.
.reno-icon-abc — a CSS class name.
$reno-icon-abc — a SCSS variable name (used mostly in content, while writing custom SCSS).

Usage example

<svg class="reno-icon"><use href="reno-icons.svg#reno-icon-alert"></use></svg>
<span class="reno-icon reno-icon-alert"></span>

Editable Font

Pointers

Icon name	SVG example	Font example
`reno-icon-menu-right`
`reno-icon-menu-down`
`reno-icon-menu-up`
`reno-icon-chevron-right`
`reno-icon-chevron-down`
`reno-icon-chevron-up`
`reno-icon-chevron-left`
`reno-icon-subdirectory-arrow-right`

Dots

Icon name	SVG example	Font example
`reno-icon-dots-vertical`
`reno-icon-drag-vertical`

Square-ish

Icon name	SVG example	Font example
`reno-icon-file-document`
`reno-icon-file-document-box`
`reno-icon-book-open-page-variant`
`reno-icon-calendar`
`reno-icon-table`
`reno-icon-table-large`
`reno-icon-content-duplicate`
`reno-icon-logout`
`reno-icon-group`
`reno-icon-comment-processing-outline`

Round-ish

Icon name	SVG example	Font example
`reno-icon-close-circle-outline`
`reno-icon-close-circle`
`reno-icon-information-outline`
`reno-icon-settings`
`reno-icon-eye-off`
`reno-icon-eye`

Misc

Icon name	SVG example	Font example
`reno-icon-priority-low`
`reno-icon-upload`
`reno-icon-download`
`reno-icon-check`
`reno-icon-window-close`
`reno-icon-pencil`
`reno-icon-magnify`
`reno-icon-contrast`
`reno-icon-alert`
`reno-icon-star`
`reno-icon-outline`
`reno-icon-chart-bar`
`reno-icon-chart-gantt`
`reno-icon-home`
`reno-icon-percent`

Custom

Not available in font