vue3 通过naive-ui 使用xicons

vue3 通过naive-ui 使用xicons

Vue3 setup 。naive-ui使用xicons记录

一、需要的准备

1.安装naive-ui

npm i -D naive-ui
在组件中的引用方式采用直接引入，只有导入的组件才会被打包。点我详细代码
使用Vue3 setup形式

2.安装xicons

介绍：整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome tabler-icons 和 carbon 的 SVG Vue/React 组件。 使用方式介绍
下面是分别安装icons库，可以都安装，也可以只安装用到的

# 适用于 vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon

同时 xicons 提供了一些图标工具组件来自定义图标的颜色和尺寸。

二、示例

在使用前可以到网站进行预览和查询，xicons.org

1.用xicons的Icon组件进行icon 的控制

xicons 提供一些 Icon 组件来帮助调整内部 SVG 图标的颜色和尺寸
安装npm i -D @vicons/utils # vue3

2.用naive-ui中