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

发表回复