iconify图标使用

图标地址：https://icon-sets.iconify.design/

安装依赖

 yarn add vite-plugin-purge-icons

依赖信息

"@iconify/iconify": "^3.1.1",
"@iconify/json": "^2.2.147",
"vite-plugin-purge-icons": "^0.10.0"

导入插件

Vue

在main.js中导入插件

import '@purge-icons/generated'

vitePress

在config.js中引入插件，并在plugns中声明插件

import PurgeIcons from 'vite-plugin-purge-icons'

plugins: [
    PurgeIcons({
        /* PurgeIcons Options */
    })
]

在theme/index.js中导入相关组件

import '@purge-icons/generated'

组件代码

<template>
  <span class="iconify m-iconify" :data-icon="icon"></span>
</template>

<script setup>
import {defineProps} from 'vue';

const props =  defineProps({
    icon: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 18
    },
    color: {
        type: String,
        default: "unset"
    }
});
</script>

<style scoped>
.m-iconify {
    font-size: v-bind(size + 'px');
    vertical-align: middle;
    color: v-bind(color);
}
</style>

使用组件

// 注册组件
app.component('LauIcon',LauIcon)

<lau-icon icon="material-symbols-light:add" :size="30"/>