@snack-uikit/icons v0.26.3

Icons

Installation

npm i @snack-uikit/icons

Как подключить иконки в проект

1. Подключите svg-inline-loader в конфигурацию webpack-a:

export default {
  module: {
    rules: [
      { 
        test: /\.symbol.svg$/, 
        use: 'svg-inline-loader' 
      },
    ],
  }, 
  ...
};

2. Подключите спрайт с иконками в проект

import { Sprite, SpriteSVG } from '@snack-uikit/icons';

function App () {
  return (
    <>
       <Sprite content={SpriteSVG} />
    </>
  );
}

3. Используйте иконки как обычные реакт-компоненты:

import { ChevronLeftSVG }  from '@snack-uikit/icons';

function MyComponent ()  {
  return <div><ChevronLeftSVG /></div>
}

Как добавить новую иконку

1. Добавьте новый svg-файл в соответсвующую коллекцию иконок в папке svgs (это может быть новый размер иконки). Далее все нужные файлы сгенерятся автоматически во время релиза пакета.
2. Если такой коллекции еще нет, создайте новую (new-collection - имя новой коллекции):
   • создайте папку new-collection внутри svgs
   • добавьте svg-файлы с названиями new-collections-s/xs (где s/xs размер иконки, 16 или 24)
   • добавьте скрипт в package.json:

   "build:new-collection": "npm run fix:icons --directory=new-collection && npm run build:icons --directory=new-collection",

   • обновите скрипт compile в package.json:

   "compile": "... && npm run build:new-collection"

3. Чтобы новая иконка появилась локально, запустите скрипт build:packages в корневом package.json

Examples

import { ChevronLeftSVG }  from '@snack-uikit/icons';

<ChevronLeftSVG size={24}/>

Props

interface ISvgIconProps extends SVGProps<SVGSVGElement> {
  className?: string;
  size?: string | number;
  style?: React.CSSProperties;
}

Changelog