vue项目中使用iconify图标集

安装插件

1 2	pnpm i @iconify/iconify -S pnpm i vite-plugin-purge-icons @iconify/json -D

配置

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons'

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

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 新增
import '@purge-icons/generated'

createApp(App).mount('#app')

封装全局组建

// AppIcon.vue
<template>
  <span :style="{ fontSize: size }">
    <span class="iconify m-iconify" :data-icon="icon"></span>
  </span>
</template>

<script setup lang="ts">
  const props = defineProps({
    icon: { type: String, required: true },
    size: { type: String, default: '18' }
  });
  const { size, icon } = toRefs(props);
</script>

<style scoped lang="scss">
  .m-iconify {
    vertical-align: middle;
  }
</style>