skills.rest
UCloud-FE
UCloud-FEOFFICIAL
Explore all skills by this author →
GitHub

cpn-basic-svg-icon

Explain SvgIcon usage for rendering internal icons in React applications.

1|Updated Apr 14, 2026
Search Tags:#documentation#ai-guidance#component-usage#react-components#ui-icons#udesign#svgicon
One-click install
npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-svg-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cpn-basic-svg-icon
Source: https://github.com/UCloud-FE/udesign-cli/tree/main/skills/cpn-basic-svg-icon
Command: npx skills add https://github.com/UCloud-FE/udesign-cli --skill cpn-basic-svg-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

这是一个针对 AI 的指南，帮助正确使用 UDesign SvgIcon 组件（该组件主要用于内部图标，当前不建议直接在外部直接使用）。加载此技能以获得统一的导入和使用规范。

Core Features & Use Cases

  • 提供导入方式和基本用法示例，帮助在 React 应用中正确渲染 SvgIcon。
  • 给出 API 参数表（type、color、spin、size）的含义与演示，方便不同场景的调整。
  • 提供最佳实践与注意事项，帮助团队保持一致性和可维护性。

Quick Start

直接按照导入示例在组件中应用 SvgIcon 即可快速上手。

Frequently Asked Questions about cpn-basic-svg-icon

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

FAQPage Schema
How do I render and configure SVG icons in a React application?▼

To render SVG icons in a React application, import the UDesign SvgIcon component and configure properties like type, color, spin, and size to adjust the icon display across different UI scenarios.

What is the UDesign SvgIcon component used for?▼

The UDesign SvgIcon component is used for rendering and configuring internal icons within a React application, providing a unified import and usage standard for internal team workflows.

Can I use the SvgIcon component directly in external projects?▼

No, the SvgIcon component is primarily designed for internal icon usage and is currently not recommended for direct application in external projects outside of its intended environment.

What API parameters are available for adjusting React UI icons?▼

The available API parameters for adjusting React UI icons include type, color, spin, and size, which allow developers to customize icon appearance and animation behavior within their applications.

What is the best way to maintain consistency when using SVG icons in React?▼

The best way to maintain consistency is to follow the provided SvgIcon import guidelines, API parameter configurations, and best practices to ensure unified usage and maintainability across the team.

Related Skills

Explore More Software Engineering Skills→
UCloud-FEUCloud-FE
1

cpn-basic-radio

Guide correct usage of the UDesign Radio component in React.

Official
Intermediate
johnlindquistjohnlindquist
24

raycast-extension

Create Raycast extensions with React and TypeScript templates.

Community
Advanced
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced