@kupibilet/icons

Спрайт с иконоками для kupibilet.ru

[![NPM version][npm-img]][npm-url] [][daviddm-dev-url]

https://github.com/kupibiletdev/icons

Сборка спрайта

1. Положить .svg иконки в /src/icons
2. Выполнить npm run build для сборки спрайта
3. Запаблишить пакет командой npm version
4. Обновить иконки на github-pages командой npm run pages

Установка в проект

npm i @kupibilet/icons --save-dev

Использование

Storybook

1. В /.storybook/head.html подключить иконки с cdn: <script src="https://unpkg.com/@kupibilet/icons"></script>
2. В каждом компоненте, где нужны иконки, добавить в stories.js, после {story()}:

  <div
    dangerouslySetInnerHTML={{ __html: window.sprite.default() }}
    style={{
      display: 'none',
    }}
  />

Сайт

coming soon

Цвет иконок

В зависимости от иконки, у неё может быть два цвета. Один определяется свойством fill, другой stroke.

Цвета в иконку передаются из стилей родительского компонента (для того, чтобы их удобно было менять вместе с цветом текста на кнопке, например):

fill: white
stroke: black

Также, через prop styleName можно передать класс с нужными свойствами.

Доступные классы, на данный момент:

• .default — переопределяются цвета для stroke и fill
• .default-fill — переопределяется цвет для fill
• .default-stroke — переопределяется цвет для stroke

[daviddm-dev-url]: https://david-dm.org/kupibiletdev/icons#info=devDependencies) [npm-img]: https://badge.fury.io/js/icons.svg [npm-url]: https://www.npmjs.com/package/icons