Svg

Svg 是一个通用的 SVG 图标组件，基于 use 标签渲染外部或内联 SVG 图标，支持颜色、大小、点击事件等配置，适用于图标统一管理和按需使用的场景。

---

📦 引入方式

import { Svg } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基础使用

main.js (入口文件内需引入) import '@/assets'

<Svg name="edit" />

📚 自定义颜色和大小

<Svg name="delete" color="red" size={20} />

📚 绑定点击事件

<Svg name="settings" onClick={() => console.log('图标点击')} />

---

🧩 Props

属性名	类型	默认值	说明
name	string	''	图标名称，对应 SVG Symbol 的 ID（不包含 #icon- 前缀）
color	string	'var(--font-3-color)'	图标颜色，可传入任何合法 CSS 颜色值
size	number	16	图标尺寸（同时控制 fontSize、minWidth、minHeight）
width	number	16	图标最小宽度（如不设置 size 时生效）
height	number	16	图标最小高度（如不设置 size 时生效）
className	string	''	自定义样式类名
onClick	() => void	() => void 0	图标点击事件处理函数

---

🧾 类型定义（简化）

interface ISvgProps {
  name?: string;
  color?: string;
  size?: number;
  width?: number;
  height?: number;
  className?: string;
  onClick?: () => void;
}

---

📌 使用注意事项

• 项目中需引入 SVG Sprite，例如通过 vite-plugin-svg-icons 或 Webpack 的 svg-sprite-loader 生成 <symbol>。
• xlinkHref 会拼接为 #icon-${name}，请确保 SVG ID 命名遵循该规则。
• 推荐通过 CSS 变量管理颜色，如 --font-3-color，以统一风格。