0.26.3 • Published 1 month ago

@snack-uikit/icons v0.26.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 month ago

Icons

Installation

npm i @snack-uikit/icons

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

  1. Подключите svg-inline-loader в конфигурацию webpack-a:
export default {
  module: {
    rules: [
      { 
        test: /\.symbol.svg$/, 
        use: 'svg-inline-loader' 
      },
    ],
  }, 
  ...
};
  1. Подключите спрайт с иконками в проект
import { Sprite, SpriteSVG } from '@snack-uikit/icons';

function App () {
  return (
    <>
       <Sprite content={SpriteSVG} />
    </>
  );
}
  1. Используйте иконки как обычные реакт-компоненты:
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

0.25.2

4 months ago

0.25.1

5 months ago

0.25.0

5 months ago

0.26.3

2 months ago

0.26.2

4 months ago

0.26.1

4 months ago

0.24.3

5 months ago

0.26.0

4 months ago

0.24.2

6 months ago

0.24.1

7 months ago

0.24.0

9 months ago

0.23.0

9 months ago

0.22.1

10 months ago

0.22.0

12 months ago

0.21.0

1 year ago

0.20.1

1 year ago

0.20.0

1 year ago

0.19.2

2 years ago

0.19.1

2 years ago

0.19.0

2 years ago