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. 安装依赖npminstall @iconify/iconify -Snpminstall vite-plugin-purge-icons @iconify/json -D
2. 配置vite.config.js文件// vite.config.jsimport PurgeIcons from'vite-plugin-purge-icons'exportdefault{plugins:[PurgeIcons({/* PurgeIcons Options */})]}
3. // main.jsimport'@purge-icons/generated'
4. 标签使用<spanclass="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离线使用相关错误

参考学习链接：https://blog.csdn.net/qq_39367226/article/details/118703069

在离线使用iconify时出现的

raw.githubusercontent.com

是因为这个地址被彻底屏蔽了，解决方案可以在hosts文件中添加此网站的IP、域名对应关系：

185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

封装Icon组件

在项目中我们肯定不能拿来直接用，通常是封装成一个通用组件。

Icon.vue

<scriptsetup>import{ nextTick, ref, unref, computed, watch }from'vue'import{ renderSVG }from"@iconify/iconify"const props =defineProps({icon:{type: String,require:true},size:{type: Number,default:16},color:{type: String,default:''}})const elRef =ref('elRef')// 判断传入的icon的值是不是以 svg-icon: 开头，如果是代表的就是本地图标，反之，则是 Iconify 图标。const isLocal =computed(()=> props.icon.startsWith('svg-icon:'))const symbolId =computed(()=>{returnunref(isLocal)?`#icon-${props.icon.split('svg-icon:')[1]}`: props.icon
})const getIconifyStyle =computed(()=>{const{ color, size }= props
  return{fontSize:`${size}px`,
    color,display:"inline-flex"}})constupdateIcon=async(icon)=>{const el =unref(elRef)if(!el)returnawaitnextTick()if(!icon)returnconst svg =renderSVG(icon,{})if(!svg){const span = document.createElement('span')
    span.className ='iconify'
    span.dataset.icon = icon
    el.textContent =''
    el.appendChild(span)}else{
    el.textContent =''
    el.appendChild(svg)}}watch(()=> props.icon,(icon)=>{updateIcon(icon)})</script><template><ElIcon:size="size":color="color"><!-- 使用本地svg图标 --><svgv-if="isLocal"aria-hidden="true"><use:xlink:href="symbolId"/></svg><spanv-elseref="elRef":class="$attrs.class":style="getIconifyStyle"><spanclass="iconify":data-icon="symbolId"></span></span></ElIcon></template><stylelang="less">.el-icon{width: auto;height: auto;}</style>

使用组件

<template><Iconicon="mdi:content-copy"></Icon></template>

iconify离线使用-2

使用vue3才能使用的@iconify/vue，但是要么联网使用，要么开发时提供一个图标api服务。

1. 安装npminstall @iconify/vue -S
2. 使用<script>import{ Icon as IconifyIcon }from"@iconify/vue"</script><template><IconifyIconicon="emojione-monotone:sun"/></template>

提供图标api服务可以在

GitHub

或者

 gitee

上下载一个项目，下载地址如下，下载后根据 README.me 文档教程操作即可。

Github: https://github.com/xiaoxian521/iconify-offline-arrange
gitee: https://gitee.com/yiming_chang/iconify-offline-arrange

注意：这个项目运行时需要先全局安装

lerna

包管理工具。

npm install lerna -g