vue3+vite使用iconify图标

iconify图标网址点这里iconify.design/

方式一： 组件式引入, 结合iconify-api在线使用

安装包 @iconify/vue

npm install --save-dev @iconify/vue

在vue页面中引入组件

import { Icon } from '@iconify/vue';

通过组件即可使用

<Icon icon="mdi-light:home" />

这个网站也有element-plus的图标：icon-sets.iconify.design/ep/?prefixe...

我们就可以使用这个图标了

<Icon icon="ep:briefcase" />

方式二：离线使用

@iconify/vue 这个包里并不包含图标的数据， 以上数据都是通过网络请求回来然后渲染的 需要安装如下包 大概(~120MB)

全部数据
npm i -D @iconify/json
部分数据
npm i -D @iconify-json/mdi

需要配合按需导入包工具使用 github.com/unplugin/un...

npm i -D unplugin-icons

设置vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), Icons({})],
});

配置tsconfig.json 类型

 "compilerOptions": {
"types": ["unplugin-icons/types/vue"],
}

此时就可以正常使用了 '~icons'是 unplugin-icons 前缀约定

<script setup lang="ts">
import IconMdl from "~icons/mdi-light/home";
</script>

<template>
  <div>
    <IconMdl></IconMdl>
  </div>
</template>

升级版---自动导入组件

unplugin-vue-components官网：github.com/antfu/unplu...

安装unplugin-vue-components插件

npm i -D unplugin-vue-components

设置vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [IconsResolver()],
    }),
    Icons(),
  ],
});

此时就可以随心的使用图标啦

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

标签名称前缀转换

IconsResolver({
  prefix: 'icon', // <--
})

<template>
  <icon-mdi-account />
</template>

方式三：通过UnoCSS 来使用

安装unoCSS @unocss/preset-uno @unocss/preset-icons

npm add -D unocss @unocss/preset-uno @unocss/preset-icons

安装@iconify/json

npm add @iconify/json

修改vite的配置文件 安装插件

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建unoCSS配置文件

// uno.config.ts
import { defineConfig } from "unocss";
import presetUno from "@unocss/preset-uno";
import presetIcons from "@unocss/preset-icons";

export default defineConfig({
  presets: [
    presetUno(), // 样式预设方案
    presetIcons({
      // 图标处理器
      // extraProperties: {// 图标样式
      //   display: "inline-block",
      //   "vertical-align": "middle",
      //   // ...
      // },
    }),
    // ...other presets
  ],
});

将 virtual:uno.css 添加到你的主入口中：

// main.ts
import 'virtual:uno.css'

此时就可以愉快的使用图标了

<div
    class="w-full flex items-center justify-center gap-x-4 text-4xl p-2 mt-4"
  >
    <div class="i-vscode-icons:file-type-light-pnpm" />
    <div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" />
  </div>