iconify图标使用(iconfonf)

iconify图标使用 iconify离线使用-1

推荐整理分享iconify图标使用(iconfonf)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:iconfonf,ios iconfont,设置icon,icon图标教程,设置icon,ios iconfont,如何使用icon,ios iconfont,内容如对您有帮助，希望把文章链接给更多的朋友！

参考学习链接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 -Snpm install vite-plugin-purge-icons @iconify/json -D

配置vite.config.js文件

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

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

// main.jsimport '@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.com185.199.109.133 raw.githubusercontent.com185.199.110.133 raw.githubusercontent.com185.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

注意：这个项目运行时需要先全局安装 lerna 包管理工具。npm install lerna -g