Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用_iconify 图标库(1)

三、插入图标

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


// template中插入
<Icon icon="mdi-light:home" />

效果：

四、离线加载

默认Iconify是在线加载的，访问有可能不稳定，很多时候私有化部署不能加载外网数据，因此我们需要离线加载，所幸的是Iconify并不是在线加载图标，而是在线加载元数据，因此，我们可以改为本地自动引入。

安装完整的图标集合（300MB左右）

npm install --save @iconify/json

然后，安装Vite的图标自动引入插件

import Icons from 'unplugin-icons/vite'

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

然后需要通过以下方式使用：

点击Icones对应图标的unplugin icons可以复制

import IconAccessibility from '~icons/carbon/accessibility'
</