@kupibilet/icons

icons for kupibilet.ru

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@kupibilet/icons
Minified + gzip package size for @kupibilet/icons in KB

Readme

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

NPM version Dependency Status devDependency Status

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.