# @snack-uikit/icons

> Пакет с иконками

Latest version **1.0.1** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/icons
pnpm add @snack-uikit/icons
yarn add @snack-uikit/icons
bun add @snack-uikit/icons
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 945.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Anna Kozlova |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/icons
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/icons
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/icons

## Recent versions

- 1.0.1 (latest) — 2026-09-21
- 1.0.1-preview-acb79d0b.0 (preview) — 2026-09-21
- 1.0.1-preview-b2e4ed46.0 — 2026-09-21
- 1.0.1-preview-27969f64.0 — 2026-09-21
- 1.0.1-preview-fe85442f.0 — 2026-09-18
- 0.27.8 — 2026-08-07
- 0.27.8-preview-4e8bfebd.0 — 2026-08-07
- 0.27.8-preview-eff3bc02.0 — 2026-08-03
- 0.27.7-preview-ea1a9bc3.0 — 2026-03-04
- 0.27.7 — 2026-03-04
- 0.27.6 — 2026-02-18
- 0.27.5 — 2026-01-19
- 0.27.5-preview-d1ce0cc3.0 — 2025-12-01
- 0.27.4 — 2025-11-28
- 0.27.4-preview-78285a66.0 — 2025-11-28
- … 86 more at https://npm.io/package/@snack-uikit/icons/versions

## README

# Icons

## Installation
`npm i @snack-uikit/icons`

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

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

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

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

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

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

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

```typescript jsx
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:
   ```json
   "build:new-collection": "npm run fix:icons --directory=new-collection && npm run build:icons --directory=new-collection",
   ```
   * обновите скрипт **compile** в package.json:   
   ```json
   "compile": "... && npm run build:new-collection"
   ```
3. Чтобы новая иконка появилась локально, запустите скрипт `build:packages` в корневом `package.json`

## Examples

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

<ChevronLeftSVG size={24}/>
```

## Props

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



[Changelog](./CHANGELOG.md)

---
_Source: https://npm.io/package/@snack-uikit/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._