skills.rest
tiantangcao1980-web
tiantangcao1980-webCOMMUNITY
Explore all skills by this author →
GitHub

nutui-icons

Integrate NutUI Icons into Vue and React projects with tree-shakeable SVG imports.

4|Updated Apr 12, 2026
Search Tags:#react#vue#icons#svg#iconography#nutui#tree-shakeable
One-click install
npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nutui-icons
Source: https://github.com/tiantangcao1980-web/DesignDNA-Skills/tree/main/designdna/skills/nutui-icons
Command: npx skills add https://github.com/tiantangcao1980-web/DesignDNA-Skills --skill nutui-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

NutUI Icons provides a ready-made, scalable SVG icon library for Vue and React projects, ensuring visual consistency and fast UI iteration.

Core Features & Use Cases

  • Paired with NutUI component libraries for consistent visuals
  • SVG-based and tree-shakeable for performance
  • 500+ glyphs across categories (navigation, user, e-commerce, etc.)
  • Size and color customization via props

Use Case: Design dashboards, mobile apps, and admin panels needing cohesive iconography.

Quick Start

Install @nutui/icons-vue or @nutui/icons-react and import only the icons you need into your Vue or React components.

Frequently Asked Questions about nutui-icons

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

FAQPage Schema
How do I add NutUI icons to my Vue or React project?▼

To add NutUI icons, install @nutui/icons-vue or @nutui/icons-react and import the specific SVG glyphs you need directly into your components.

What is tree-shakeable SVG iconography and why use it for mobile apps?▼

Tree-shakeable SVG iconography allows you to import only the icons you use, reducing bundle size and improving performance for mobile apps and dashboards.

Does NutUI icons work with both Vue and React component libraries?▼

Yes, NutUI icons works with both Vue and React by providing separate packages, @nutui/icons-vue and @nutui/icons-react, for cohesive visual integration.

Can I customize the size and color of SVG icons via props?▼

Yes, you can customize SVG icon size and color directly via props when importing glyphs from the NutUI icons library into your components.

What's the best way to ensure visual consistency for e-commerce UI icons?▼

Using a cohesive SVG icon library like NutUI icons provides 500+ glyphs across categories, ensuring visual consistency for e-commerce UIs and admin panels.

Related Skills

Explore More Design & Creative Skills→
tiantangcao1980-webtiantangcao1980-web
4

nutui-uniapp

Configure NutUI UniApp port for Vue 3 across H5 and MiniPrograms.

Community
Intermediate
cfardevcfardev

react-icons

Render SVG icons in React/Next.js by importing from react-icons.

Community
Basic
tiantangcao1980-webtiantangcao1980-web
4

nutui-templates

Create mobile e-commerce templates with NutUI for Vue and React projects.

Community
Intermediate
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic