vue3 通过naive-ui 使用xicons

vue3 setup语法糖使用xicons

vue3 通过naive-ui 使用xicons

Vue3 setup 。naive-ui使用xicons记录

一、需要的准备

1.安装naive-ui

npm i -D naive-ui

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

<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>

2.安装xicons

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

# 适用于 vue3npm 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 awesomenpm 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

<template>
    <Icon :size="40" color="#0e7a0d">
        <CarOutline />
    </Icon>
</template>

<script setup lang="ts">
import { CarOutline } from "@vicons/ionicons5";
import { Icon } from "@vicons/utils";
</script>

2.用naive-ui中<n-icon/ >

<template>
    <n-icon :size="40" color="#0e7a0d">
        <Wind />    
    </n-icon>
</template>

<script setup lang="ts">
import { Wind } from "@vicons/fa";
import { NIcon } from "naive-ui";
</script>