Naive UI的初体验

Naive UI的初体验

Naive UI: 一个 Vue 3 组件库

安装

安装组件

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>