SkillFoxx

vite-plugin-svg-icons-ng skill

A skill for the Vite SVG sprite plugin: setup, configuration, Vue and React components, SSR and migration from the old plugin.

  • 117 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • The skill consists of instructions and references and runs no commands on its own.
All reasons and checks

yangxu52/vite-plugin-svg-icons-ngAuthor:yangxu52

Install

In your terminal, with SkillFoxx CLI

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

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill consists of instructions and references and runs no commands on its own.

This is third-party code. Review the repository files before installing.

What it does

vite-plugin-svg-icons-ng builds SVG files into a sprite and injects it when the app starts. The companion skill tells an agent how to wire the plugin into a Vite project. It sorts a request into setup, direct icon use or components, options, virtual modules, SSR and TypeScript, and migration from the old `vite-plugin-svg-icons`. Each topic has its own reference: `getting-started`, `usage-and-components`, `options-and-runtime` and `migration`. The skill answers only from the plugin's documentation site. If the docs do not settle a question, the agent says what is undocumented and asks for project context instead of guessing from source code. Plugin development, compiler internals and releases are out of scope.

Who it is for. Frontend developers on Vite with Vue 3 or React who set up sprite icons or migrate from the old plugin.

Good fit when

  • SVG files from a directory are wired into a new Vite project as icons.
  • Icons are wrapped as a Vue 3 or React component.
  • The app uses SSR and the sprite must match between dev and build.
  • A project is moving from `vite-plugin-svg-icons` and needs a migration checklist.

Not a fit when

  • You are editing the plugin's own source: the repository has separate developer skills for that.
  • The build does not run on Vite.
  • You want advice on icon design or a design system rather than plugin setup.

Example request

Add vite-plugin-svg-icons-ng to this Vite and Vue 3 project and build an icon component from the src/icons directory.

Limitations

The skill relies on the plugin's documentation site, so the agent needs access to it. Chinese questions are answered from the Chinese guide pages; the docs have no Russian version. The skill knows nothing about the plugin's internals: cache, HMR updates and the compiler are deliberately out of scope. It does not configure other sprite tools such as `svgo`. The `npx skills add` command installs the skill for the current project, and the `-g` flag makes it global.

How to disable. Delete the `vite-plugin-svg-icons-ng` skill directory from the agent's skills folder. The plugin itself is removed from dependencies separately.

FAQ

How do I install the skill?

Run `npx skills add yangxu52/vite-plugin-svg-icons-ng`. Add the `-g` flag for a global install.

How do I install the plugin itself?

With `pnpm add -D vite-plugin-svg-icons-ng`. After that the skill walks through the guide: Vite configuration, icon use and components.

How does the plugin differ from vite-plugin-svg-icons?

It is a separate plugin inspired by the old one: cached compilation with HMR, consistent output across dev, build and SSR, and detection of duplicate `symbolId` values. The skill takes the migration steps from its `migration` reference.

Which topics does the skill cover?

Installation and first Vite configuration, direct icon use, Vue 3 and React components, plugin options, virtual modules, SSR, TypeScript and migration.

What does the skill not do?

It stays away from plugin development, compiler internals, cache and HMR, `svg-icon-baker`, tests and releases. The repository has developer skills for those.

Discussion

No questions or reviews yet.

Skills

A two-skill plugin that migrates a Vite and React Router SPA to SSR Boost or scaffolds a new SSR application.

PluginExtended access119

A Vite plugin with a skill that writes errors, requests and page snapshots to logs an agent reads to find the cause of a bug

SkillExtended access105

A set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging

SkillMinimal access3.3K
Official

The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules

SkillExtended access10.8K

Thirty-plus skills for Vue, Pinia, Vue Router, Reka UI and VueUse, tied to package versions and rebuilt with each release.

SkillMinimal access184

VibeStart composes a TypeScript project from chosen stack layers and gives the agent a verified base with rules and tests.

SkillExtended access292

README in short

The root README introduces the plugin and straight away offers an install command for the agent skill. The detailed guide lives on a documentation site in English and Chinese.

README badge

Original 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.

Report a problem