Vue学习-1（14）封装 icon 组件

去看去思考 去看去思考 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 200+累计阅读 271平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄6年
关注
原创 最新推荐文章于 2026-07-04 13:30:37 发布 271 阅读 AI 写同款· GEO 优化 ›
【封装UI组件库系列】封装Icon图标组件 在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-uiAnt Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。 阅读详情

image-20201230195309045

  • iconItem

image-20201231232140963
image-20201230195746628

  • css
    image-20201230195844388
    image-20201230195917998
    image-20201231233747534
收录于
vue学习

当前文章被收录于：

vue学习
18 篇文章 0 人学习
订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Element Plus 源码：实现 Icon 组件的详细过程 Element Plus 组件最简单入手的就是 icon 组件，所以先从 icon 组件来大概了解整个项目处理组件的基本原理，由浅入深，能让你了解到ELement Plus 的bem 命名规范themechalk 文件中的 scss,组件如何定义类型和基本实现思路以及部分在 icon 组件中使用到的 hooks 和 utils 中的方法。本章内容比较长，详细的介绍了从零搭建一个 icon 组件的步骤，如果内容存在问题还请多多指正，一起进步。 阅读详情

相关推荐

iview/viewUI库组件封装学习——icon

致力于提升组件封装思路，向iview组件库贡献大神学习day01：icon组件 先上源码，然后总结使用方法和亮点学习 <template> <i :class="classes" :style="styles" @click="handleClick"></i> </template> <script> const prefixCls = 'ivu-icon'; export default { name:

weixin_45440813的博客 1594

vue中使用remixicon

vue中使用remix icon

weixin_69518525的博客 2000

vue3+vite：封装Svg组件

vite-plugin-svg-icons 是一个 Vite 插件，用于在 Vite 2 项目中方便地使用 SVG 图标。它可以自动将 SVG 图标文件转换为 Vue 组件，并且提供了一些配置选项来自定义生成的组件。

CYL_2021的博客 5218

如何在前端项目中使用icon图标 （iconfont和remixicon以及Materialicon）

使用图标库的教程

haodanzj的博客 3526

vue封装使用 svg-icon组件

vue封装使用 svg-icon组件

CC酱写前端的博客 1811

RemixIcon是一套面向设计师和开发者的开源图标库

Remix Icon 是一套面向设计师和开发者的开源图标库。我们在设计之初将图标风格定义为中性风格，以便适用于各种用户群的项目

【亲测免费】 Remix Icon 使用手册

Remix Icon 是一个开源图标库，致力于提供高质量的 UI 图标解决方案。该项目遵循 Apache License 2.0 协议，允许自由地在产品中使用并分布这些图标，无需强制归因，但提及“Remix Icon”于产品信息中将被非常感激。Remix Icon 提供了多种图标的风格，包括填充（-fill）和轮廓（-line）样式，并且支持通过SVG Sprite或React、Vue等框架进行便...

gitblog_00493的博客 3105

Qt绘图库对决：QWT与QCustomPlot的实战选型指南

本文为Qt开发者提供了QWT与QCustomPlot两大绘图库的实战选型指南。文章从功能特性、性能资源、开发效率三大维度进行深度对比，并结合工业监控、科学计算、嵌入式设备等典型场景，给出了清晰的决策清单。对于需要专业科学图表（如极坐标、等高线图）的场景推荐QWT；对于追求高性能、实时性、快速开发及嵌入式部署的通用图表需求，QCustomPlot是更优选择。

alpha的博客 243

vue实现搜索功能

computed (赋值) <template> <div class="service"> <div class="search-main"> <el-input placeholder="搜索名称" v-model="query.name"> <i slot="su...

sasha 573

新手必看：用Simulink搭建飞跨电容三电平逆变器的完整流程（附SPWM配置技巧）

本文详细介绍了使用Simulink搭建飞跨电容三电平逆变器（FCNPC）的完整流程，特别聚焦于SPWM调制策略的配置技巧。通过模块拆解、参数设置和波形优化的三步法，配合实操截图和典型参数表，帮助新手快速掌握多电平逆变器的建模与仿真技能，适用于电力电子学习和项目开发。

weixin_30664051的博客 287

别再死记硬背了！用MaxDEA软件实操SBM、DDF、NDDF模型，手把手教你测算绿色全要素生产率

本文深度解析如何使用MaxDEA软件实操SBM、DDF、NDDF模型，手把手教你测算绿色全要素生产率（GTFP）。通过详细的模型选择对比、数据准备策略和MaxDEA操作流程，帮助研究者科学构建指标体系并准确解读结果，提升环境管理研究的实证分析能力。

weixin_28731231的博客 316

RemixIcon图标状态管理终极指南：React Context与Vuex集成实战

RemixIcon是一款开源的中性风格图标系统，拥有3100+精心设计的图标，为设计师和开发者提供完美的视觉体验。今天我将分享如何在React和Vue项目中通过状态管理工具高效集成RemixIcon图标，实现动态图标切换和主题管理。 ## 🎯 为什么要进行图标状态管理？ 在现代Web应用中，图标不仅仅是静态装饰，它们需要根据应用状态动态变化。RemixIcon状态管理能帮你实现： - **

gitblog_00650的博客 1204

数通基础（基本网络通信原理、IP地址如何配置、DHCP、DNS域名系统、路由技术基础、静态路由 、TCP和UDP、vlan虚拟局域网、trunk、三层交换）

我们知道了1、电脑开机，通过dhcp获取ip地址2、电脑输入域名，www.baidu.com电脑把www.baidu.com发到自己的dns服务器3、dns服务器把域名解析成对应的ip地址4、电脑向百度服务器发送一个请求。

qq_53235556的博客 6482

vue3.0封装svg-icon组件并使用

过程1.使用vue-cli3.0脚手架运行搭建一个项目2.components文件下新建SvgIcon组件3.将所需svg文件放置icons的svg文件夹下4.main.js中引入icons文件5.直接在组件中使用icon-class为svg名字的图标即可6.注意：1.安装svg-sprite-loader，2.在vue.config.js文件下配置svg-sprite-loader转载相关的网站： 1.使用vue-cli3.0脚手架运行搭建一个项目 2.components文件下新建SvgIcon组件

千里花开花落的博客 5151

VFIO框架源码分析（二十二）- IOMMUFD 的脏页跟踪与 Dirty Bits 读取

在虚拟化热迁移（Live Migration）的场景中，脏页追踪（Dirty Page Tracking）是最具挑战性的环节之一。它的核心任务是实时捕获设备（DMA）对内存的写操作，以便 VMM（如 QEMU）知道哪些内存页需要被重新传输到目标主机。在强耦合与粗粒度：脏页追踪是绑定在 Container 上的。这意味着，如果一个 Container 内有多个设备，哪怕只有一个设备在写内存，脏页追踪也会影响 Container 内的所有设备。软件模拟开销大。

qq_36071928的博客 1046

道通无人机信号分析

本文分析了道通无人机及其遥控器的EIRP参数（表1-2），发现不同地区的功率标准存在差异。针对5230MHz图传信号，观测到四帧连续信号结构类似LORA分包传输。脉冲分析（表3）显示固定3.9ms脉宽和1.1ms间隔。频谱异常表现为非矩形窗特征，经分析系多径效应引起的频率选择性衰落所致——不同路径传播导致特定频率出现相长/相消干涉，形成波峰波谷的起伏频谱特征。这种现象与无线信道的多径时延、衰减差异直接相关。

jiaotinglang2580的博客 487

在Vue项目中封装一个Icon组件

1. 图标组件 组件位置： @/components/Icon 实现步骤： 1.首先我们去Iconfont中找到自己需要的图标，并添加到到自己的项目中 2.在项目中，选择Symbol，然后生成代码，注意代码是一个JS文件 3.在Vue项目中封装一个Icon组件 export default function createIconfont(options) { let scri...

stone_tomcate的博客 920

【Bug已解决】npm install -g @anthropic-ai/claude-code 出现 EACCES: permission denied 解决方案

方案适用场景推荐指数nvm 管理 Node长期开发环境，一次配置永久生效⭐⭐⭐⭐⭐修改 npm 全局目录不想引入 nvm，快速解决⭐⭐⭐⭐修复现有目录权限之前用过 sudo 装包，需要修复⭐⭐⭐Windows 管理员/改目录Windows 平台专用⭐⭐⭐⭐官方原生安装脚本想彻底避开 npm 权限问题⭐⭐⭐⭐报的本质是npm 全局安装目录的属主权限与当前执行用户不匹配，而不是 npm 或 Claude Code 本身有问题。不要用sudo"强行"解决。

一键难忘的博客 1万+

【封装UI组件库系列】封装Button图标组件

上一篇我们已经封装了第一个Icon组件，接下来我们就开始封装Button组件。分析封装组件所需支持的属性与事件。

Ghmin的博客 2111

【学习系列】SAP RAP 18：Unmanaged场景开发示例-基本数据更新

本文介绍了在SAP RAP中unmanaged模式下从0到1的开发步骤。unmanaged模式下需要自行实现数据更新、权限检查等逻辑，适用于操作现有数据库表或复杂业务场景。文章以两层的采购订单对象为例，详细说明了创建技术对象（表、视图、行为定义等）的过程，并重点阐述了如何实现CRUD相关方法的核心逻辑。通过创建缓冲类来处理交互阶段和保存阶段的数据操作，确保事务一致性。完整代码展示了抬头层级的增删改查功能实现，为后续明细层级的开发奠定了基础。

DeveloperMrMeng的博客 641

温度PID控制PLC程序

温度PID稳定控制程序，适用于欧姆龙PLC，对其他PLC也具有很大参考价值

vue项目封装icon

前言 在项目中常遇到使用图标的地方，找了许多解决方式，最终还是选择了iconfont图标作为常用图标库。 但是在实际开发当中，使用iconfont提供的开发方式有诸多不便的地方。例如当需要新增一个图标是，需要更新在线链接，然后再将项目当中的链接替换。 接下来记录一次如何在vue中封装icon，更高效的使用icon。 本篇文章取自：手摸手，带你优雅的使用 icon 封装组件 首先让我们先创建一个公共...

weixin_30640291的博客 1010

WINCC7.3破解文件

WINCC7.3硬件够破解文件，有需要的下载！WINCC7.3硬件够破解文件，有需要的下载！

基于vue封装的icon拖拽组件

Drag.vue <style lang="less" scoped> .drag-wraper{ position:fixed; opacity: 0; display: block; z-index: 999; transform:translate(0px,0px) translateZ(0); } </style&...

Dong8508的博客 868

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

组件封装-封装icon图标

【代码】组件封装-封装icon图标。

weixin_53954177的博客 200

vue中封装svg-icon组件并使用

新建的vue项目结构 components文件下新建SvgIcon组件 index.vue文件中代码 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> &...

花&败 2919

vue中封装svg-icon组件

1.components文件下新建SvgIcon组件 文件中的代码 <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', pr...

yjtt__的博客 991

icon解决方案(iconify)，基于unplugin-icons封装通用icon组件

对于icon，前端的第一反应就是采用iconfont来做，对于多数场景当然是没有问题的，甚至后续项目中出现自定义icon只需要ui将设计传到iconfont平台就行了，但是毕竟还是经过了第三方平台的，所以我采用了iconify方案。

m0_74382023的博客 4696
上一篇： Vue学习-1（13）如何 import 一个目录下某后缀的所有文件
下一篇： Vue学习-1（15）添加Nav样式
点赞 0
评论 1
书签 书签 0
去看去思考
去看去思考
博客等级 码龄6年 1粉丝 21原创
+ 关注 专栏目录 订阅专栏
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值