iconify图标使用

iconify离线使用-1

参考学习链接1：https://juejin.cn/post/7042971845695373325

参考学习链接2：https://juejin.cn/post/7184730305545109561

参考学习链接3：https://juejin.cn/post/7087827571861585956

查找图标网址：https://icon-sets.iconify.design/material-symbols/

导入全部iconify

1. 安装依赖

   npm install @iconify/iconify -S
   npm install vite-plugin-purge-icons @iconify/json -D
   

2. 配置vite.config.js文件

   // vite.config.js
   import PurgeIcons from 'vite-plugin-purge-icons'
   
   export default {
        
     plugins: [
       PurgeIcons({
        
         /* PurgeIcons Options */
       })
     ]
   }
   

3. 在入口文件导入（可能会有 raw.githubusercontent.com 相关错误，详细说明

   // main.js
   import '@purge-icons/generated'
   

4. 标签使用

   <span class="iconify" data-icon="eva:people-outline"></span>
   

按需导入iconify

按需导入的本质是：根据图标前缀导入对应的json文件，这种导入文件的形式可以把该图标集都导入进来。

import iconify from '@iconify/iconify'
import dashicons from '@iconify/json/json/dashicons.json'
import emojioneMonotone from '@iconify/json/json/emojione-monotone.json'
iconify.addCollection(dashicons)
iconify.addCollection(emojioneMonotone)

还有一种导入单个图标的方式：

import Iconify from '@iconify/iconify/offline'
import adminUsers from '@iconify/icons-dashicons/admin-users' //icons-dashicons需要安装
Iconify.addIcon('dashicons:admin-users', adminUsers)

备注：icons-dashicons 需要单独安装 npm install @iconify/icons-dashicons -D

iconify离线使用相关错误<