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离线使用相关错误

参考学习链接：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

<script setup>
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(() => {
  return unref(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"
  }
})
const updateIcon = async (icon) => {
  const el = unref(elRef)
  if (!el) return
  await nextTick()
  if (!icon) return
  const 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图标 -->
      <svg v-if="isLocal" aria-hidden="true">
        <use :xlink:href="symbolId" />
      </svg>
        <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
          <span class="iconify" :data-icon="symbolId"></span>
        </span>
    </ElIcon>
</template>
<style lang="less">
.el-icon {
  width: auto;
  height: auto;
}
</style>

使用组件

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

iconify离线使用-2

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

1. 安装

   npm install @iconify/vue -S
   

2. 使用

   <script>
   import { Icon as IconifyIcon } from "@iconify/vue"
   </script>
   <template>
   	<IconifyIcon icon="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