SvgIcon 本地 SVG 图标
使用 UnoCSS Icons 加载和使用本地 SVG 图标。
简介
项目通过 @unocss/preset-icons 实现本地 SVG 图标的加载和使用。只需将 SVG 文件放入指定目录，即可在项目中通过 CSS 类名使用图标。
基本用法
1. 添加 SVG 图标
访问 iconfont 下载所需的 SVG 图标，并将其复制到 src/assets/icons 目录下。
命名规范
- 使用小写字母命名
- 多个单词使用连字符分隔
- 例如：
home.svg、user-info.svg、shopping-cart.svg
2. 使用图标
下载一个名为 home.svg 的图标后，可以通过 i-svg:图标名称 调用：
vue
<template>
<!-- 默认尺寸 1em，颜色 currentColor，继承父级的文本颜色 -->
<div class="i-svg:home"></div>
<!-- 自定义颜色和尺寸 -->
<div class="i-svg:home text-xl text-blue-500"></div>
</template>1
2
3
4
5
6
7
2
3
4
5
6
7
自定义样式
设置大小
使用 UnoCSS 的文本大小类名控制图标尺寸：
vue
<template>
<!-- 小尺寸 -->
<div class="i-svg:home text-sm"></div>
<!-- 中等尺寸 -->
<div class="i-svg:home text-base"></div>
<!-- 大尺寸 -->
<div class="i-svg:home text-2xl"></div>
<!-- 超大尺寸 -->
<div class="i-svg:home text-4xl"></div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
设置颜色
图标默认继承父级文本颜色（currentColor），可以通过文本颜色类名修改：
vue
<template>
<!-- 蓝色图标 -->
<div class="i-svg:home text-blue-500"></div>
<!-- 红色图标 -->
<div class="i-svg:home text-red-500"></div>
<!-- 绿色图标 -->
<div class="i-svg:home text-green-500"></div>
<!-- 自定义颜色 -->
<div class="i-svg:home" style="color: #409EFF"></div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
组合样式
vue
<template>
<div class="flex items-center gap-2">
<div class="i-svg:user text-xl text-blue-500"></div>
<span>用户中心</span>
</div>
</template>1
2
3
4
5
6
2
3
4
5
6
使用场景
菜单图标
vue
<template>
<el-menu-item index="1">
<div class="i-svg:dashboard text-xl"></div>
<span>仪表盘</span>
</el-menu-item>
</template>1
2
3
4
5
6
2
3
4
5
6
按钮图标
vue
<template>
<el-button>
<div class="i-svg:plus text-base"></div>
<span>新增</span>
</el-button>
</template>1
2
3
4
5
6
2
3
4
5
6
页面标题
vue
<template>
<div class="flex items-center gap-2">
<div class="i-svg:setting text-2xl text-primary"></div>
<h1>系统设置</h1>
</div>
</template>1
2
3
4
5
6
2
3
4
5
6
实用技巧
1. 图标库管理
建议在 src/assets/icons 目录下创建子目录分类管理图标：
src/assets/icons/
├── menu/ # 菜单图标
│ ├── dashboard.svg
│ ├── system.svg
│ └── user.svg
├── action/ # 操作图标
│ ├── add.svg
│ ├── edit.svg
│ └── delete.svg
└── common/ # 通用图标
├── search.svg
├── refresh.svg
└── close.svg1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
使用时需要包含子目录路径：
vue
<div class="i-svg:menu/dashboard"></div>
<div class="i-svg:action/add"></div>
<div class="i-svg:common/search"></div>1
2
3
2
3
2. SVG 优化
使用 SVGO 或在线工具优化 SVG 文件，减小文件体积：
- 移除无用的元素和属性
- 优化路径数据
- 移除注释和元数据
3. 图标预览
在开发环境中，可以创建一个图标预览页面，展示所有可用的图标。
常用图标资源
- iconfont - 阿里巴巴矢量图标库
- iconify - 开源图标集合
- heroicons - 精美的手工制作 SVG 图标
- feathericons - 简洁的开源图标
- flaticon - 最大的免费图标数据库
注意事项
1. 图标格式
- 仅支持 SVG 格式
- 建议使用单色图标
- 确保 SVG 使用
currentColor作为填充色
2. 命名规范
- 使用英文命名
- 避免使用特殊字符
- 保持命名简洁明了
3. 性能优化
- 及时清理未使用的图标
- 避免使用过大的 SVG 文件
- 复杂图标建议转为图片格式