Naive UI的初体验
安装
安装组件
npm i -D naive-ui
安装字体图标
官方推荐使用xicons - Icons for Vue & React
如何安装该字体图标:xicons/README.zh-CN.md at main · 07akioni/xicons · GitHub
# 安装你需要的包
# 适用于 react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# 适用于 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
# 适用于 vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm i -D @v2icons/antd
npm i -D @v2icons/material
npm i -D @v2icons/fa # font awesome
npm i -D @v2icons/tabler
npm i -D @v2icons/carbon
# 使用 SVG
npm i -D @sicons/fluent
npm i -D @sicons/ionicons4
npm i -D @sicons/ionicons5
npm i -D @sicons/antd
npm i -D @sicons/material
npm i -D @sicons/fa # font awesome
npm i -D @sicons/tabler
npm i -D @sicons/carbon
我们选择以下安装
npm i -D @vicons/ionicons5
组件引入
全局引入
import { createApp } from "vue";
import App from "./App.vue";
import naive from "naive-ui";
createApp(App).use(naive).mount("#app");
使用
字体图标的使用
第一步
打开xicons - Icons for Vue & React
选择自己想要的图标名称,复制名称而不是复制svg代码
第二步
引入该组件
import { GameController, Airplane, FlashOutline } from "@vicons/ionicons5";
第三步
注册该组件
components: {
GameController,
Airplane,
FlashOutline,
},
第四步
在模板中使用
<template>
<n-space>
<!-- 字体图标按钮-->
<n-button color="#8a2be2">
<template #icon>
<n-icon>
<Airplane />
</n-icon>
</template>
</n-button>
<!-- 普通的字体图标-->
<n-icon size="40" color="#0e7a0d">
<game-controller />
</n-icon>
<!-- 输入框前后缀字体图标-->
<n-input placeholder="搜索">
<template #prefix>
<n-icon>
<FlashOutline />
</n-icon>
</template>
</n-input>
<n-input round placeholder="搜索">
<template #suffix>
<n-icon>
<FlashOutline/>
</n-icon>
</template>
</n-input>
</n-space>
</template>
<script>
import { GameController, Airplane, FlashOutline } from "@vicons/ionicons5";
export default {
name: "Home",
components: {
GameController,
Airplane,
FlashOutline,
},
};
</script>
<style>
.carousel-img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>