如何使用图标

⭐⭐⭐⭐⭐

本项目提供了两种图标的使用方式，所有图标均可使用CSS修改尺寸和颜色。

一、使用 iconify 图标(推荐)

可以使用 iconify 内的所有图标集，共有几十个图标集共计上万个图标，足够满足大部分使用需求， 并且打包时只会打包用到的图标。
图标地址：https://icones.js.org/collection/ri

SVG图标使用方式

<Icon name="ri:bug-2-fill" size="30px" />

也可以直接使用 emoji 表情包

<Icon name="🚀" />

和UI库嵌套使用

<n-button type="primary" @click="notify">
  <Icon style="color: red;" name="ri:bug-2-fill" />按钮
</n-button>

CSS图标使用方式

<IconCSS name="ri:bug-2-fill" />

参数	类型	说明
name	string	图标集名称:图标名
size	string	尺寸

更多信息请参考插件nuxt-icon

二、使用本地 SVG 图标

需将SVG文件保存至assets/icons文件夹中然后再使用

<nuxt-icon name="svgName">

使用 CSS 调整大小和颜色，多色图标需要添加 filled 属性

参数	类型	默认值	说明
name	string	/	SVG文件名
filled	boolean	false	是否为多色图标

更多信息请参考插件nuxt-icons