The react-svg-sprite from kulakovserg

react-svg-sprite's Introduction

Getting start

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>

автоматизация создания коллекции иконок (сейчас это нужно делать вручную)
добавление в разметку спрайта только с теми иконками, которые используются в данный момент и последующее динамическое добавление иконок в этот спрайт (чтобы не засорять разметку)

Recommend Projects