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

作者：木道寻08 | 2024-07-09 21:02:22

踩

iconify本地

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


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

1
2
3
4
5
6

效果：

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

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

npm install --save @iconify/json
1

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

import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    Icons({}),
  ],
})
1
2
3
4
5
6
7

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/803647