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库，可以都安装，也可以只安装用到的

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

<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>

vue3 通过naive-ui 使用xicons相关推荐

Naive UI使用useDialog、useMessage、useNotification、useLoadingBar，超实用
本人是使用的vite3+vue3+TS+Naive UI 标题提到的四个组合API都是需要在setup中使用的,如果脱离,就会报错,在搭建框架的时候又需要脱离单独使用.搜索了好多的解决方案,大都是将他 ...
Vue3 UI组件库对比，Naive UI、Element Plus、 Ant Design Vue
对比图 \ Element Plus Naive ui Ant Design Vue 简介 element-ui Vue3版本,国内使用广泛 Vue作者推荐的Vue3ui 组件库阿里Ant Desi ...
vue3 使用render函数渲染插槽,以Naive UI为例
Vue3使用render函数渲染插槽,以Naive UI为例网上有好多解释rende函数和插槽原理的文章,不可否认他们的水平都比我高,只是我这篇文章更加注重"术\法\道"中的术, ...
vue3+Naive UI数据表格基本使用方式
一.基础使用方式 1.引入表格及数据 <-- 表格标签 --> <n-data-table :bordered="false" :single-line=&quo ...
源码级剖析了 Naive UI 的 Button 完整过程
注意:为了让篇幅尽可能简洁一丢丢,在有些地方贴源码时,我尽可能贴最能反映要讲解内容的源码,其他重复性的代码就略去了,所以如果你自己尝试去阅读源码时,可能会发现和文章里的代码有出入.文章跑通 Naive ...
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
Nuxt3 + Naive UI 的SSG项目分享（一）
搭建Nuxt3项目分享你好! 这是写在分享前的前言,主要是想谈谈分享的初心,它涉及两个方面:一是整理并且巩固自己的技术应用的知识,用于查漏补缺之用:二则是秉承互联网精神,在网络上相互分享,相互协作. ...
Naive Ui Admin 发布后台管理系统高颜值Admin骨架看看是不是你想要的
简介 Naive Ui Admin 是一个免费开源的中后台模版,使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. 特性最新技术栈 ...
Naive Ui Admin前端集成框架
简介 Naive Ui Admin 是基于 vue3,vite2,TypeScript,搭配使用 Naive Ui 组件库形成一套开箱即用的中后台前端解决方案,Naive Ui Admin 遵守 Na ...
推荐 8 个支持 Vue3 的前端 UI 组件库，免费开源、漂亮美观，涵盖常用的业务组件
Vue3 正式发布已经快2年了,今年2月也正式变成 Vue 项目的默认版本,今天分享8个优秀的 Vue3 UI 组件库. Element Plus 相关网址:https://www.thosefree ...

vue3 通过naive-ui 使用xicons

vue3 setup语法糖使用xicons

vue3 通过naive-ui 使用xicons

一、需要的准备

1.安装naive-ui

2.安装xicons

二、示例

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

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

vue3 通过naive-ui 使用xicons相关推荐

最新文章

热门文章