vue3使用Material Design Icons

1. Material Design Icons地址：Material Design Icons - Icon Library - Pictogrammers
2. 官方配置地址：https://github.com/unplugin/unplugin-icons
3. 配置：
   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）使用。