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
-
安装依赖
npm install @iconify/iconify -S npm install vite-plugin-purge-icons @iconify/json -D -
配置vite.config.js文件
// vite.config.js import PurgeIcons from 'vite-plugin-purge-icons' export default { plugins: [ PurgeIcons({ /* PurgeIcons Options */ }) ] } -
在入口文件导入（可能会有
raw.githubusercontent.com相关错误，详细说明// main.js import '@purge-icons/generated' -
标签使用
<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服务。
-
安装
npm install @iconify/vue -S -
使用
<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文章来源：https://www.toymoban.com/news/detail-456335.html
注意：这个项目运行时需要先全局安装 lerna 包管理工具。npm install lerna -g文章来源地址https://www.toymoban.com/news/detail-456335.html
到了这里，关于iconify图标使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
