git clone <repo>
cd <directory>
npm install
npm run start
Переходим на https://localhost:8080/public_html
В файле src/svg-icons.js лежит коллекция иконок. Сами иконки представляют из себя объект вида:
{
id: <string>,
viewBox: <string>,
source: <string>,
}
Для создание спрайта и добавления его в разметку используется компонент SvgSprite. Он принимает коллекцию иконок в свойство symbols.
<SvgSprite symbols={[{ ... }, ...]} />
На выходе получаем:
<svg style="display: block; width: 0; height: 0">
<symbol id="..." viewBox="..."> ... </symbol>
...
</svg>
Для использование спрайта существует компонент SvgIcon, который принимает свойство name соотвествующий имени нужной иконки.
<SvgIcon name="<имя_иконки>" />
Компонент возвращает svg вида:
<svg class="icon icon_<имя_иконки>">
<use xlink:href="#<имя_иконки>" />
</svg>
- автоматизация создания коллекции иконок (сейчас это нужно делать вручную)
- добавление в разметку спрайта только с теми иконками, которые используются в данный момент и последующее динамическое добавление иконок в этот спрайт (чтобы не засорять разметку)