https://github.com/bree7e/import-icons
https://github.com/bree7e/import-icons
Last synced: 25 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bree7e/import-icons
- Owner: bree7e
- License: apache-2.0
- Created: 2022-12-08T11:40:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-08T11:42:32.000Z (over 3 years ago)
- Last Synced: 2025-02-22T03:43:13.457Z (over 1 year ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Import icons
Утилита для импорта иконок из figma
## Установка
Добавить в `.npmrc` строку:
```bash
@vepp:registry=http://172.31.240.39:4873
```
Установить пакет из репозитория:
```bash
npm i --save-dev @vepp/import-icons
```
**!** Так как скрипт скорее всего будет запускаться разработчиками вручную, все зависимости унесены в `peerDependencies` для возможности их установки глобально, а не для конкретного приложения.
Для установки глобально:
```bash
npm i -g fs-extra got ora svgo ts-node
```
Для установки локально
```bash
npm i -D fs-extra got ora svgo ts-node
```
## Быстрый старт
1. После установки выполнить `npx import-icons`. Скрипт закончится с ошибкой, но создаст конфигурационный файл `figma.json`
2. Заполнить `figma.json`, для удобства использования он имеет схему, которая находится в `node_modules/@vepp/import-icons/schema/figma-schema.json`. Пример конфигурации:
```json
{
"$schema": "./node_modules/@vepp/import-icons/schema/figma-schema.json",
"projects": {
"vepp-mobile": {
"icons": {
"url": "https://www.figma.com/file/b7BggraZ1Ih3kG69jxdXSral/Vepp_213-Gorr)",
"token": "38637-e3d9e312-215f-4d8c-a7be-94a5d1ae064b",
"outputDir": "apps/vepp-mobile/src/assets/icons",
"pageName": "mobile-icons"
}
}
}
}
```
- figma-токен нужен для загрузки содержимого figma-файла по api. Как получить читать [тут](https://www.figma.com/developers/api#access-tokens).
3. Запустить скрипт `npx import-icons {projectName}`
## Оптимизация иконок
В данный момент принудительно включена, оптимизация происходит через утилиту [svgo](https://github.com/svg/svgo)
Для кастомного конфига svgo нужно в корне создать файл `svgo.json`, пример:
```json
{
"plugins": [
{
"removeStyleElement": true
},
{
"sortAttrs": true
},
{
"moveElemsAttrsToGroup": false
},
{
"removeViewBox": false
}
]
}
```