vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

GitHub Demo 地址

在线预览

vue3 - 按需导入使用Element Plus图标、iconify图标、本地SVG/PNG图标

      • [GitHub Demo 地址](https://github.com/iotjin/jh-vue3-admin)
      • [在线预览 ](https://iotjin.github.io/jh-vue3-admin)
  • 一、iconify插件
    • 安装
    • 使用
    • 效果图
  • 二、通过自动导入使用iconify
    • 安装Element Plus
    • 安装自动导入插件
    • 安装自动导入 Icon 插件
    • 通过iconify使用Element Plus图标
    • 效果图
    • 通过 UnoCSS,Element Plus 像 Element UI 一样使用 Icon
    • 效果图
  • 三、SVG本地图标
    • 效果图
  • 四、本地PNG图标
    • 效果图

vue项目使用的图标一般有本地的png、svg图标,Element图标,还有就是通过自动导入使用三方库iconify的图标

一、iconify插件

Iconify for Vue 官方文档

Iconify内的 element-plus图标

Iconify 是一个开源的图标集和图标管理工具。它提供了一个庞大的图标库,包含数千个常用图标,涵盖了各种主题和风格,如 Material Design、Font Awesome、Feather 等。这些图标可以以矢量格式(SVG)使用,适用于各种项目,如网站、移动应用、桌面应用等。

安装

npm install --save-dev @iconify/vue

使用

用法

import { Icon } from '@iconify/vue'<!-- https://github.com/iconify/iconify/tree/main/components/vue --><Icon icon="ep:add-location" height="24" /><Icon icon="mdi-light:home" width="16" height="16" /><Icon icon="mdi-light:home" height="24" /><Icon icon="mdi-light:home" height="2em" /><Icon icon="mdi-light:home" height="auto" /><Icon icon="eva:alert-triangle-fill" color="orange" /><Icon icon="eva:alert-triangle-fill" color="#f00" /><div><!-- 水平翻转图标: --><Icon icon="eva:alert-triangle-fill" :h-flip="true" /><Icon icon="eva:alert-triangle-fill" :horizontal-flip="true" /><Icon icon="eva:alert-triangle-fill" flip="horizontal" /><!-- 垂直翻转图标 --><Icon icon="eva:alert-triangle-fill" :v-flip="true" /><Icon icon="eva:alert-triangle-fill" :vertical-flip="true" /><Icon icon="eva:alert-triangle-fill" flip="vertical" /><!-- 水平和垂直翻转图标(与180度旋转相同): --><Icon icon="eva:alert-triangle-fill" :h-flip="true" :v-flip="true" /><Icon icon="eva:alert-triangle-fill" :horizontal-flip="true" :vertical-flip="true" /><Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" /><!-- 90度旋转的例子: --><Icon icon="eva:alert-triangle-fill" :rotate="1" /><!-- <Icon icon="eva:alert-triangle-fill" rotate="90deg" /><Icon icon="eva:alert-triangle-fill" rotate="25%" /> --></div>

效果图

在这里插入图片描述

二、通过自动导入使用iconify

安装Element Plus

element plus 按需导入 官方文档
element plus 使用icon图标 官方文档

通过element plus使用icon图标,可以通过以下两种方式(本文通过方式2)
1、可以通过命令 npm install @element-plus/icons-vue单独安装icons-vue组件,然后使用
2、也可以通过使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。

element plus使用icon图标一般是通过组件的方式使用的,如 <Search />,或者自动导入配置后<i-ep-edit />

npm install element-plus

安装自动导入插件

安装两个按需导入的插件,避免在多个页面重复引入 API 或 组件
unplugin-auto-import 按需自动导入API,如:ref,reactive,watch,computed 等API
unplugin-vue-components 按需自动导入组件,如:Element Plus 等三方库和指定目录下的自定义组件

npm install -D unplugin-auto-import unplugin-vue-components

安装自动导入 Icon 插件

使用 unplugin-iconsunplugin-auto-import 可以从 iconify 中自动导入图标

npm i -D unplugin-icons

vite.config.ts 配置自动导入,新建 /src/types 目录用于存放自动导入函数auto-imports.d.ts和组件的TS类型声明文件components.d.ts

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'plugins: [AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ['vue', '@vueuse/core'],// imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],eslintrc: {enabled: false, // 是否自动生成 eslint 规则,建议生成之后设置 false,手动维护filepath: './.eslintrc-auto-import.json', // 指定自动导入函数 eslint 规则的文件路径globalsPropValue: true},resolvers: [// 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)ElementPlusResolver(),IconsResolver({})],vueTemplate: true,// 配置文件生成位置(false:关闭自动生成)dts: false// dts: 'src/types/auto-imports.d.ts' // 指定自动导入函数TS类型声明文件路径}),Components({resolvers: [// 自动导入 Element Plus 组件ElementPlusResolver(),// 自动导入图标组件IconsResolver({// @iconify-json/ep 是 Element Plus 的图标库enabledCollections: ['ep']})],// 指定自定义组件位置(默认:src/components)dirs: ['src/**/components'],// 配置文件位置(false:关闭自动生成)dts: false// dts: "src/types/components.d.ts",}),Icons({// 自动安装图标库autoInstall: true}),
]

在这里插入图片描述

.eslintrc.cjs 添加自动导入函数 eslint 规则

"extends": ["./.eslintrc-auto-import.json"
]

tsconfig.json 添加自动导入TS类型声明文件

{"include": ["src/**/*.d.ts"]
}

运行项目 npm run dev 查看效果

在这里插入图片描述

通过iconify使用Element Plus图标

<template><h1>iconify 图标:</h1><div><icon1 /><!-- <icon2 /> --><icon3 /></div><div><i-ep-edit /><el-icon :size="19.2" color="#409eff"><i-ep-edit /></el-icon></div>
</template><script setup lang="ts">
// element-plus图标
// https://icon-sets.iconify.design/ep/
import icon1 from '~icons/ep/help-filled'
// import { HelpFilled } from '@element-plus/icons-vue'// 其他的
// https://icon-sets.iconify.design/
// import icon2 from '~icons/mdi/home-clock'
// 动态图标
// https://icon-sets.iconify.design/line-md/
// https://icon-sets.iconify.design/svg-spinners/
import icon3 from '~icons/line-md/home'
</script>

效果图

在这里插入图片描述

通过 UnoCSS,Element Plus 像 Element UI 一样使用 Icon

Vue3!Element Plus 如何像 Element UI 一样使用 Icon?

UnoCSS官网

UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎 ,用于构建响应式网页和应用程序界面。它提供了一套简洁、易于使用的样式类,帮助开发者快速搭建漂亮且功能强大的界面。

npm add -D unocss

vite.config.ts 配置

import UnoCSS from 'unocss/vite'
import { presetIcons } from 'unocss'export default {plugins: [// 配置UnoCSS,使其可以直接使用标签 <i-ep-edit /> | <el-button icon="i-ep-edit" > edit </el-button>// UnoCSS({})UnoCSS({presets: [presetIcons({scale: 1.2,warn: true})],// 以下配置是为了可以直接使用标签 <i-ep-edit /> | <el-button icon="i-ep-edit" > edit </el-button>variants: [{match: (s) => {if (s.startsWith('i-')) {return {matcher: s,selector: (s) => {return s.startsWith('.') ? `${s.slice(1)},${s}` : s}}}}}]})],
}

main.ts 引入 uno.css

import 'uno.css'

示例

    <h2>el-button+图标:</h2><el-button type="primary"><el-icon> <i-ep-edit /> </el-icon> 新增</el-button><el-button type="primary" icon="i-ep-edit"> 新增 </el-button>

效果图

在这里插入图片描述

三、SVG本地图标

通过 vite-plugin-svg-icons 插件使用 Iconfont 第三方图标库实现本地SVG图标展示
vite-plugin-svg-icons 官方文档

npm install -D fast-glob
npm install -D vite-plugin-svg-icons

先指定一个存放svg的路径,如:src/assets/iconssrc/assets/error

vite.config.ts 中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'const resolve = (dir: string) => path.resolve(process.cwd(), dir)plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [resolve('src/assets/icons'), resolve('src/assets/error')],// iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: 'icon-[dir]-[name]'}),
]

src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

封装一个SVG 组件以供项目使用
在src/components/创建SvgIcon文件夹,创建index.vue

<template><svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size"><use :xlink:href="symbolId" :fill="color" /></svg>
</template><script setup lang="ts">
const props = defineProps({prefix: {type: String,default: 'icon'},iconClass: {type: String,required: false,default: ''},color: {type: String,default: ''},size: {type: String,default: '1em'}
})const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script><style scoped>
.svg-icon {display: inline-block;width: 1em;height: 1em;overflow: hidden;vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */outline: none;fill: currentcolor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
}
</style>
<template><h1>img SVG本地图片:</h1><svg-icon icon-class="homepage" /><svg-icon icon-class="user" color="red" />
</template><script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

效果图

在这里插入图片描述

四、本地PNG图标

vue3中使用本地图标和vue2还是有点区别

vue2使用的require,如:<img :src="require('@/assets/test.png')" />

vue3和vite中使用require会报错(require is not definedrequire is not defined),因为requirewebpack提供的方法,在vite中不适用。在vite中,由于使用了 ES modules 的方式来加载模块,因此不能使用 require,而是使用 import

以下是vue3中使用本地PNG图标的方式(调试和线上图标都显示)

<template><h1>img 本地PNG图片:</h1><img src="../../../assets/images/static/icon.png" /><img :src="imgPath2" /><img :src="imgPath3" /><img :src="imgPath4" /><img :src="imgPath5" /><h2>img 本地图片动态导入:</h2><img :src="getImgPath2('icon2.png')" /><img :src="getImgPath3('icon3.png')" />
</template><script setup lang="ts">
import imgPath2 from '@/assets/images/static/icon2.png'
const imgPath3 = getImgPath('icon3.png')
const imgPath4 = new URL(`../../../assets/images/static/icon4.png`, import.meta.url).href
const imgPath5 = new URL(`@/assets/images/static/icon5.png`, import.meta.url).hrefconst getImgPath2 = (name: string): any => {return new URL(`/src/assets/images/static/${name}`, import.meta.url).href
}const getImgPath3 = (name: string): any => {return new URL(`../../../assets/images/static/${name}`, import.meta.url).href
}</script>

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/142000.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于微信小程序的音乐播放器设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

在虚拟机上安装win10/ubuntu的教程

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 一、下载软件资源 1、首先下载虚拟机Vmware_Pro17软件并正确安装&#xff1a;网盘链接 2、然后下载操作系统的镜像文件&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 二、在虚拟机上安装ubuntu系统 1…

共享门店模式:一种新兴的商业模式

共享门店模式是一种利用实体店铺的空间和资源&#xff0c;让多个品牌或商家在同一地点共同运营的商业模式。这种模式可以提高店铺的利用率&#xff0c;降低经营成本&#xff0c;增加客流量&#xff0c;实现资源的最大化利用。如果你是一个有创业想法的企业家&#xff0c;或者你…

2023-9-26 JZ52 两个链表的第一个公共节点

题目链接&#xff1a;两个链表的第一个公共节点 import java.util.*; /* public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} }*/ public class Solution {public ListNode FindFirstCommonNode(ListNode head1, ListNode head2) {ListNo…

数据统计和分析怎么做?spss如何做好数据分析?

为什么要做数据分析?数据分析有什么意义&#xff1f;数据分析可以为企业和组织提供多方面的帮助&#xff0c;包括提高工作效率、优化业务流程、升职加薪、提高管理效率以及改进汇报效果等方面。 IBM SPSS Statistics 26是一款功能强大的统计分析软件&#xff0c;适用于Mac操作…

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机

LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机 随着全球风电装机容量的快速增长&#xff0c;雷电活动对风力发电机组造成的损害受到更多关注&#xff0c;特别是在雷电活动强烈的地区。在冬季闪电期间&#xff0c;风力涡轮机等高层结构会受到向上的雷击。众所周知&#x…

JetBrains 产品安装插件(plugins)的两种方式

安装分为在线、离线两种方式&#xff1a; 在线方式&#xff1a; File > Settings > Plugins 搜索插件 Install 即可 离线方式&#xff1a; 官网&#xff1a;https://plugins.jetbrains.com/ 搜索到插件后&#xff0c;点击 "Get"&#xff0c;选择自己安装的…

maven本地安装jar包

在实际开发中&#xff0c;有些jar包不能通过公共库下载&#xff0c;只能本地安装。可以按照以下步骤操作&#xff1a; 1、安装命令 mvn install:install-file -DgroupIdcom.chinacreator.sm -DartifactIdfbm-sm-common -Dversion0.0.1 -Dpackagingjar -Dfile../newJar/fbm-sm…

【LeetCode热题100】--160.相交链表

160.相交链表 使用双指针&#xff1a; /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*/ public class Solution {public ListNode getInter…

数字孪生在智慧城市应用场景中的五大特点

数字孪生城市提出至今&#xff0c;已从概念、框架走向落地深耕&#xff0c;逐渐演变成为城市变革新动力和城市转型新路径&#xff0c;是智慧城市发展演进的重要方向。 数字孪生城市建设现已加速步入“技术多维集成、场景创新重构、市场成效导向”的落地实施时期。这一时期&…

第三十九章 持久对象和SQL - 持久类的 SQL 映射

文章目录 第三十九章 持久对象和SQL - 持久类的 SQL 映射持久类的 SQL 映射对象 SQL 映射的演示 对象 SQL 映射的基础知识Classes and Extents 第三十九章 持久对象和SQL - 持久类的 SQL 映射 持久类的 SQL 映射 对于任何持久类&#xff0c;该类的每个实例都可以作为表中的一…

前端项目练习(练习-003-webpack-01)

学习webpack前&#xff0c;首先&#xff0c;创建一个web-003项目&#xff0c;内容和web-002一样。&#xff08;注意将package.json中的name改为web-003&#xff09; 想想&#xff0c;我们开发Java 的时候&#xff0c;Maven帮我们做的主要是编译&#xff0c;打包等等内容。开发前…

【EI会议征稿】第八届能源系统、电气与电力国际学术会议(ESEP 2023)

第八届能源系统、电气与电力国际学术会议&#xff08;ESEP 2023&#xff09; 2023 8th International Conference on Energy System, Electricity and Power 第八届能源系统、电气与电力国际学术会议&#xff08;ESEP 2023&#xff09;定于2023年11月24-26日在中国武汉隆重举…

【教程】视频汇聚/视频监控管理平台EasyCVR录像存储功能如何优化?具体步骤是什么?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。视频监控系统EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…

丰田的国际化与转型困境:对中国车企的欧洲策略启示

摘要&#xff1a;欧洲市场的消费者汽车偏好多样,中国车企进军欧洲时,需考虑产品设计和当地法规。回顾历史,丰田汽车通过其独特管理理念,在美国从廉价品牌形象成功转型为高质量、受信赖的全球品牌。但进入电动汽车时代&#xff0c;日本车企因深度共生的传统供应链而转型坎坷。中…

EasyExcel的源码流程(导入Excel)

1. 入口 2. EasyExcel类继承了EasyExcelFactory类&#xff0c;EasyExcel自动拥有EasyExcelFactory父类的所有方法&#xff0c;如read()&#xff0c;readSheet()&#xff0c;write()&#xff0c;writerSheet()等等。 3. 进入.read()方法&#xff0c;需要传入三个参数(文件路径…

1024程序员节之天马低代码开发者大赛篇

卡奥斯第二届1024程序员节正在火热进行中&#xff01;本次活动由四个线上活动分会场线下会场组成&#xff0c;今天向大家详细介绍一下四大线上分会场中的“低代码分会场”~ 天马低代码开发者大赛于2023年9月22日至10月20日12: 00进行&#xff0c;活动设立能源和组态两个赛道&a…

算法竞赛备赛之动态规划训练提升,DP基础掌握

1.背包问题 1.1.01背包问题 01背包问题是在M件物品中选择若干件放在空间为W的背包中&#xff0c;每件物品的体积为W1&#xff0c;W2至Wn&#xff0c;价值为P1&#xff0c;P2至Pn&#xff0c;01背包的约束条件是给定几种物品&#xff0c;每种物品有且只有一个&#xff0c;并且…

深入理解Java单例模式和优化多线程任务处理

目录 饿汉模式懒汉模式单线程版多线程版双重检查锁定 阻塞队列 单例模式能保证某个类在程序中只存在唯一一份实例, 而不会创建出多个实例&#xff0c;并提供一个全局访问点。 饿汉模式 类加载的同时&#xff0c;创建实例。 class Singleton {private static final Singlet…

基于 MATLAB 的电力系统动态分析研究【IEEE9、IEEE68系节点】

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…