PubSvgIcon 组件图标

基本使用

使用name 属性指定图标名称, 会加载 SVG 图标或者自动引用 Iconify 图标。

使用SVG图标

你可以去阿里巴巴矢量图标库，或者其它支持下载 SVG 图标文件的网站，又或者是设计师绘制的 SVG 文件，将准备好的 SVG 图标文件放到 /src/assets/icons/ 目录下，然后在页面中就可以通过 PubSvgIcon 组件使用了，name 就是 SVG 的文件名。

Iconify 图标

介绍

Iconify 提供 100+ 套图标集，有 100,000+ 个图标可以免费使用。

除了可以在 Iconify 官网上查找搜需要的图标，你还可以在 Icônes 网站 上查找，这是一个基于 Iconify 的在线图标搜索网站，它比 Iconify 官网的操作更直观。

选择了icon 后直接复制到代码中即可使用，icon 基于 vite 插件自动下载图标，无需手动下载，在打包时会懒加载编译到项目中。

自定义颜色

通过设置 color 属性可以改变图标的颜色。

图标大小

通过设置 size 属性可以改变图标的尺寸

图标翻转

通过设置 flip 属性可以改变图标的翻转方式，支持水平、垂直以及同时翻转

图标旋转

通过设置 rotate 属性可以改变图标的旋转角度

API

属性

属性名	说明	类型	默认值
name	svg 文件名 / Iconify 图标名	string	-
flip	翻转方式，支持水平、垂直以及同时翻转	horizontal、vertical、both	-
rotate	旋转角度	number	0
color	颜色	string	-
size	尺寸	string、number	1em