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

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

https://github.com/kupibiletdev/icons

Как локально посмотреть иконки?

yarn run build open dist/index.html

Подготовка иконки

Часто бывает что после оптимизации svg после дизайнеров они ломаются из-за того что были сделаны неустойчиво

• Можно заранее прогнать через оптимизацию SVGOMG
• Убедиться, что width и height и viewBox установлены и работают правильно
• Убедиться что у тебя квадратная картинка, и viewBox квадратный тоже
• Часто бывает, что fill-rule="evenodd" ломает оптимизацию

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

1. Положить .svg иконки в /src/icons. Название иконки должно быть с приставкой kb_.
2. Запустить yarn build, после чего убедиться, что в собранном спрайте (dist/sprite.js) появилась новая иконка и она не пустая.
3. Закомитить изменения.
4. Запаблишить пакет командой npm version patch (эту команду выполняет maintainer репозитория).

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

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