vue3使用Material Design Icons_material design icons在vue3中使用-CSDN博客

本文链接：https://blog.csdn.net/lamuleimu/article/details/148348834

Material Design Icons地址：Material Design Icons - Icon Library - Pictogrammers
官方配置地址：https://github.com/unplugin/unplugin-icons

配置：
1> 首先需要下载两个自动导入辅助插件。

unplugin-vue-components 是一个用于自动导入 Vue 组件的插件，能够在 Vue 3 项目中简化组件的使用，无需手动导入每个组件。它支持按需加载，提高开发效率。

unplugin-icons 按需通用地访问数千个图标作为组件。

npm i -D unplugin-vue-components unplugin-icons

2> 然后我们下载mat图标组件。

官方有两种推荐的引入方式全量引入npm i -D @iconify/json

部分按需引入npm i -D @iconify-json/mdi

我这里使用第二种

3>添加vite.config.ts 文件添加配置。

我们先引入最开始下载的两个插件配置
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
然后在配置插件里添加配置
plugins: [
    Vue(),
    Components({
      resolvers: [
        IconsResolver()
      ],
    }),
    Icons(),
  ],

4>使用。
方法一直接使用：
我们去官网随便拿一个图标点击图标会跳出下面弹窗，我们切换tab到webfont然后把图标字符粘贴出来。

在项目里要使用的vue组件里引入 如果我们在vite里IconsResolver里面配置了prefix也就是前缀这里就需要加自定义的前缀我这里设置的icon。

如果不需要我们也可以把前缀设置为false,那么使用的时候也就不要加前缀了。

方法二配合vuetify组件库：
1）vuetifyjs官网地址：开始使用 Vuetify 3 — Vuetify
2）我们对照官网在已有的vue3项目里下载vuetify组件库。

3）安装本教程最开始的所有内容配置好了之后，我们同样去Material Design Icons官网拿一个图标但是这次我们选vue 由于我们是按需引入的引入路径需要改成~icons/mdi/xxx,我这里引入的是mdiPlusBox图标所以完整路径是~icons/mdi/plus-box(中划线命名)。


4）使用。