Icones.js Vue 集成步骤全解析 2025 新版图标解决方案优势在哪？

npm install --save-dev @iconify/vue unplugin-icons

yarn add --dev @iconify/vue unplugin-icons

import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';

export default defineConfig({
  plugins: [
    Icons({
      autoInstall: true,
      compiler: 'vue3',
      customCollections: {
        icones: () => import('@iconify-json/icones/icons.json').then(i => i.default)
      }
    })
  ]
});

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

<template>
  <div>
    <Icon icon="icones:home" />
  div>
template>

<template>
  <div>
    <Icon icon="icones:home" color="#3366EE" size="32" />
  div>
template>

import { defineComponent } from 'vue';
import { useIcon } from '@iconify/vue';

export default defineComponent({
  setup() {
    const homeIcon = useIcon('icones:home');
    return { homeIcon };
  }
});

<template>
  <div>
    <component :is="homeIcon" color="#3366EE" size="32" />
  div>
template>