@kupibilet/icons

5.9.66 • Public • Published

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

[![NPM version][npm-img]][npm-url] Dependency Status [devDependency Status][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

Readme

Keywords

none

Package Sidebar

Install

npm i @kupibilet/icons

Weekly Downloads

26

Version

5.9.66

License

MIT

Unpacked Size

121 kB

Total Files

4

Last publish

Collaborators

  • kupibilet-common
  • privetkometa
  • kupibilet-dev