Skills
.Work. You
Rest

n-icon

Community

Render scalable SVG icons with style and depth.

Software Engineering#vue#svg#icon#wrapper#depth#naive-ui#icon-library
Authorjiaiyan
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: n-icon
Download link: https://github.com/jiaiyan/naive-ui-skills/archive/main.zip#n-icon

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.