skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-icon

Display and customize SVG icons with size, color, and depth in Vue/Nuive UI projects.

8|3|Updated Mar 13, 2026
Search Tags:#vue#svg#icon#wrapper#depth#naive-ui#icon-library
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-icon
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-icon
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icon components address the need to display scalable, stylable SVG icons in interfaces, enabling consistent sizing, color, depth, and wrappers without duplicating logic.

Core Features & Use Cases

  • Size Control: adjust icon size with numeric or string values.
  • Color Customization: apply color to icons or icon wrappers.
  • Depth Levels: support depth 1-5 to align with text depth or themes.
  • Component Prop and Icon Wrapper: render icons directly or inside wrappers for backgrounds.
  • Custom SVG Support: render arbitrary SVG content as icons.
  • Icon Library Integration: work with external libraries like xicons for broader selections.
  • Use Cases: toolbar icons, navigation indicators, status icons, and icon-only controls across Vue/Nuive UI apps.

Quick Start

Add an n-icon in your layout and supply a size along with an inline SVG or component to display.

Frequently Asked Questions about n-icon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render and customize SVG icons within a Vue or Naive UI project?▼

You can use an icon wrapper component to render SVG icons with custom backgrounds. By encapsulating icons inside a wrapper, you apply background colors and depth levels to create distinct visual containers for icon-only controls and navigation indicators in your Vue application.

Does this SVG icon component support custom SVG content and external icon libraries?▼

Yes, the SVG icon component supports rendering arbitrary custom SVG content directly. It also integrates with external icon libraries like xicons, enabling broader icon selections while maintaining consistent size, color, and depth control across your UI.

How do I align SVG icon depth levels with text depth or UI themes?▼

You can align SVG icon depth levels with text depth or themes using the component's depth 1-5 support. This feature allows icons to visually match the varying depth levels of surrounding text and UI elements for consistent thematic styling.

What is the best way to apply size and color to SVG icons without duplicating logic?▼

The best way to apply size and color to SVG icons without duplicating logic is using an encapsulated icon component. It accepts numeric or string values for size and applies color to the icons or their wrappers, ensuring consistent styling across your interface.

Can I use this SVG icon component for icon-only controls and status indicators?▼

Yes, you can use this SVG icon component for icon-only controls and status indicators. It is specifically designed for use cases like toolbar icons, navigation indicators, and status icons within Vue and Naive UI applications, supporting depth and wrapper styling.

Related Skills

Explore More Software Engineering Skills→
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate
hamzaPixlhamzaPixl
2

svg-icon-creation

Create optimized SVG icons as TypeScript React components with ARIA attributes.

Community
Intermediate
SayadBotSayadBot
2

hugeicons

Render Hugeicons icons in React components using @hugeicons/react and @hugeicons/core-free-icons.

Official
Basic