SkillFoxx
Telegram

vite-plugin-svg-icons-ng — скилл

Навык по плагину SVG-спрайтов для Vite: установка, настройка, компоненты для Vue и React, SSR и миграция со старого плагина.

  • 117 ★ репозитория
  • Последний коммит
Скилл

Минимальный доступ

Почему такой уровень

  • Навык состоит из инструкций и справочников, команд сам не запускает.
Все причины и проверки

yangxu52/vite-plugin-svg-icons-ngАвтор:yangxu52

Установка

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/vite-plugin-svg-icons-ng

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

  • Навык состоит из инструкций и справочников, команд сам не запускает.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

vite-plugin-svg-icons-ng собирает SVG-файлы в спрайт и вставляет его при запуске приложения. Сопутствующий навык подсказывает агенту, как подключить плагин в проекте на Vite. Он разбирает запрос на установку, прямое использование иконок или компоненты, параметры, виртуальные модули, SSR и TypeScript, а также перенос со старого плагина `vite-plugin-svg-icons`. Для каждой темы у навыка свой справочник: `getting-started`, `usage-and-components`, `options-and-runtime` и `migration`. Ответы навык строит только по документации сайта плагина. Если документация вопроса не закрывает, агент называет пробел и просит уточнить проект. Догадки по исходникам навык исключает. Разработку самого плагина, внутренности компилятора и релизы навык не берет.

Для кого. Фронтенд-разработчикам на Vite с Vue 3 или React, которые подключают иконки-спрайты или переезжают со старого плагина.

Подходит, если

  • В новый проект на Vite подключают иконки из SVG-файлов в каталоге.
  • Иконки оформляют как компонент для Vue 3 или React.
  • Приложение работает с SSR, и спрайт должен совпадать в разработке и сборке.
  • Проект переезжает с `vite-plugin-svg-icons`, и нужен чек-лист миграции.

Не подходит, если

  • Вы правите исходники самого плагина: для этого в репозитории свои навыки разработчика.
  • Сборка идет не на Vite.
  • Нужен совет по оформлению иконок или дизайн-системе, а не по настройке плагина.

Пример запроса к агенту

Подключи vite-plugin-svg-icons-ng к проекту на Vite и Vue 3 и сделай компонент иконки из каталога src/icons.

Ограничения

Навык ссылается на документацию сайта плагина, поэтому для ответов агенту нужен доступ к ней. На вопросы по-китайски он отвечает по китайским страницам руководства, русской версии у документации нет. Навык ничего не знает про внутреннее устройство плагина: кеш, обновление HMR и работу компилятора он обходит намеренно. Другие инструменты спрайтов, например `svgo`, он не настраивает. Команда `npx skills add` ставит навык для текущего проекта, а флаг `-g` делает установку глобальной.

Как отключить. Удалите каталог навыка `vite-plugin-svg-icons-ng` из каталога навыков агента. Сам плагин из зависимостей убирают отдельно.

Частые вопросы

Как установить навык?

Выполните `npx skills add yangxu52/vite-plugin-svg-icons-ng`. Для глобальной установки добавьте флаг `-g`.

Как поставить сам плагин?

Командой `pnpm add -D vite-plugin-svg-icons-ng`. Дальше навык ведет по руководству: настройка Vite, использование иконок и компоненты.

Чем плагин отличается от vite-plugin-svg-icons?

Это отдельный плагин по мотивам старого: кешируемая компиляция с HMR, одинаковый результат в разработке, сборке и SSR, проверка повторяющихся `symbolId`. Порядок миграции навык берет из справочника `migration`.

Какие темы разбирает навык?

Установку и первую настройку Vite, прямое использование иконок, компоненты Vue 3 и React, параметры плагина, виртуальные модули, SSR, TypeScript и миграцию.

Что навык не делает?

Он не берется за разработку самого плагина, внутренности компилятора, кеш и HMR, `svg-icon-baker`, тесты и релизы. Для этого в репозитории есть навыки разработчика.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Плагин с двумя навыками переносит SPA на Vite и React Router в SSR Boost или создает новое SSR-приложение с нуля.

ПлагинРасширенный доступ119

Плагин Vite со скиллом: пишет ошибки, запросы и снимки страницы в журналы, по которым агент находит причину поломки

СкиллРасширенный доступ105

Набор скиллов для разработки на Vue 3: практики Composition API, роутер, Pinia, тесты, JSX, Options API и разбор ошибок

СкиллМинимальный доступ3,3 тыс.
Официальный

Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки

СкиллРасширенный доступ10,8 тыс.

Три десятка скиллов по Vue, Pinia, Vue Router, Reka UI и VueUse. Тексты привязаны к версиям пакетов и обновляются с релизами.

СкиллМинимальный доступ184

VibeStart собирает проект на TypeScript из выбранных слоев стека и отдает агенту проверенную основу с правилами и тестами.

СкиллРасширенный доступ292

Коротко о README

Корневой README представляет плагин и сразу приводит команду установки навыка для агентов. Подробное руководство вынесено на сайт документации с английской и китайской версиями.

Бейдж для README

Исходный SKILL.md

---
name: vite-plugin-svg-icons-ng
description: 'Consumer setup and integration for vite-plugin-svg-icons-ng: installation, createSvgIconsPlugin configuration, direct SVG usage, Vue 3 and React components, htmlMode, virtual modules, TypeScript, SSR, and migration from vite-plugin-svg-icons. Excludes plugin source development, compiler/cache/HMR internals, svg-icon-baker, workspace maintenance, tests, and releases.'
---

# vite-plugin-svg-icons-ng (library-user support)

Consumer-facing reference for `vite-plugin-svg-icons-ng`, intended for AI Agent use rather than direct end-user reading.

## Scope

Cover only the public consumer workflow:

- installation and first Vite configuration;
- direct SVG usage and reusable Vue 3 or React icon components;
- public plugin options and runtime choices;
- virtual modules, SSR, and TypeScript declarations;
- migration from `vite-plugin-svg-icons`.

Do not infer consumer instructions from implementation files. Do not handle package internals, compiler behavior, cache/HMR fixes, `svg-icon-baker` development, workspace/release work, or test maintenance. Route those requests to the repository's developer skills instead.

## Documentation sources and routing

Documentation site: https://vite-plugin-svg-icons-ng.yangxu.cc

All factual guidance must be grounded in the documentation site. Read only the reference needed for the current question. When the user asks in Chinese, use the Chinese guide pages on the documentation site; do not assume undocumented behavior from source code, package metadata, or history.

| User task                                    | Skill reference                      |
| -------------------------------------------- | ------------------------------------ |
| Install and configure the plugin             | `references/getting-started.md`      |
| Direct usage or component integration        | `references/usage-and-components.md` |
| Options, virtual modules, SSR, or TypeScript | `references/options-and-runtime.md`  |
| Migrate from the old plugin                  | `references/migration.md`            |

If the docs do not establish an answer, say what is undocumented and ask for the missing project context instead of guessing from source code or history.

## Agent workflow

1. Classify the request as setup, direct/component usage, runtime/SSR/TypeScript, or migration.
2. Identify the project's framework and package manager before choosing an example.
3. Check prerequisites and the existing plugin configuration before proposing edits.
4. Give the smallest change supported by the documentation, including the documented imports, paths, and relevant follow-up page when needed.
5. Call out mutually exclusive or easy-to-misconfigure runtime choices.
6. For migration, follow the migration reference and finish with its checklist.

Сообщить о проблеме