icon图标风格有哪些（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

安装依赖

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

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


 


 


 


 


 


 
。npm install lerna -g