Vue3 SvgIcon组件开发

已于 2024-07-25 06:17:01 修改
阅读量281 收藏 1
点赞数 3
分类专栏： Vue3开源组件实战 文章标签： svg vue vite
于 2024-07-23 11:11:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/felix_alone2012/article/details/140630429
版权

在前面自定义tree组件继续功能迭代前，我们先开发一个通用的ScgIcon组件，用于后续组件模板中小图标的展示。

引入iconfont

官网：https://www.iconfont.cn/

选取图标进行下载，只取iconfont.js文件

在这里插入图片描述

在prettier中忽略该文件：

在这里插入图片描述

放入iconfont.js文件：

在这里插入图片描述

开发SvgIcon组件

在这里插入图片描述

vitepress整合

增加菜单

在这里插入图片描述

全局引入和注册

在这里插入图片描述

编写markdown文档：

在这里插入图片描述

编写组件示例：

在这里插入图片描述

执行效果：

在这里插入图片描述

应用到Tree组件

在tree组件模板中应用<SvgIcon>组件。

在这里插入图片描述

将原先的+、-符号的按钮替换为自定义折叠展开图标：

在这里插入图片描述

Java小卷
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
10-15
本篇文章将详细介绍如何在 Vue CLI 3 环境下正确封装 Svgicon 组件。 首先，我们需要在 `src` 目录下创建一个新的文件夹，用于存储 SVG 图标。例如，我们可以命名为 `Icons/svg`。这个文件夹将存放所有的 SVG 图标...
vue3系列：构建 SvgIcon 组件
weixin_64684095的博客
06-01 1401
构建 SvgIcon 组件
vue3 中使用svg-icon
Qanx的博客
03-09 5546
vue3 中使用svg-icon
vue2&3自定义svg图标组件
pscool的博客
03-21 5228
可参考： 未来必热：SVG Sprites技术介绍 懒人神器：svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader
Vue中使用svg-基于vue-svgicon组件
05-17 2318
目录 一、下载vue-svgicon 二、main.js中引入 三、将.svg转换成.js进行引入 四、使用 一、下载vue-svgicon cnpm i -S vue-svgicon 二、main.js中引入 import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon' }); 注意：这里要记得加上{tagName:'svg-icon'}，否则会报错 三、将.svg转换成.js进行引..
【vue3+vite】SvgIcon组件(vite-plugin-svg-icons插件)
MM_520131400的博客
09-13 1408
vite + vue3 + typeScript , 进行封装svgicon组件，所用到插件fast-glob、vite-plugin-svg-icon、unplugin-vue-components 、vite-plugin-vue-setup-extend
vue2svgicon组件
08-12
Vue2SVGIcon组件是基于Vue.js框架的一个实用工具，它允许开发者在Vue应用程序中方便地引入和使用SVG图标。SVG（Scalable Vector Graphics）图标因其可缩放性、清晰度和良好的性能，在Web开发中越来越受欢迎。Vue2...
vue-svgicon-创建svg图标组件的工具。 （版本2.x）。-Vue.js开发
05-27
vue-svgicon创建svg图标组件的工具。 （vue 2.x）中文尝试下一个版本：4.x灵感https://github.com/Justineo/vue-awesome演示https：// vue-svgicon一个用于创建svg图标组件的工具。 （vue 2.x）中文尝试下一个版本：...
vue-echart-starter:vue，vue-echart，vue-baidu-map，vue-svgicon，vuex，nprogress，gulp，element-ui
05-09
3. **Vue Baidu Map**：这个组件使开发者能够在Vue应用中集成百度地图API，提供地图展示、定位、标注、路线规划等功能，适用于地理信息相关的应用开发。 4. **Vue SVGIcon**：SVGIcon是Vue的一个组件，用于动态加载...
vue-cli3 从搭建到优化的详细步骤
10-17
在使用项目的过程中，为了优化和管理SVG图标，可以在/src/components目录下创建一个SvgIcon.vue组件，并编写一个index.js脚本来动态全局注册这些SVG图标。安装svg-sprite-loader来处理SVG图标的加载，并配置vue....
vue实战——图标，请使用SVG！（含插件vue-svg-icon的使用）
朝阳39的博客
09-26 3060
为什么推荐svg图标？ 缺图标时，通常我们都会选择阿里图标库 https://www.iconfont.cn/ 为了避免不断变更的图标需求，导致反复更新图标地址或重新下载整个项目的图标，推荐将图标下载到本地。 与png格式相比，svg格式有以下优点： 同尺寸的图标，svg所占空间更小 SVG是矢量图文件，可以随意改变大小，同时不影响图标质量。 svg图标既可以通过.svg文件引入html中，也可以直接使用svg代码渲染（svg代码还可以便捷修改成任意想要的效果） 可以用CSS样式自由.
通用组件—SvgIcon引入和使用
codfishXY的博客
07-28 4161
Icon Svg-Icon 创建一个专门放置图标 icon 的文件夹： src/icons 添加SvgIcon组件到公共components目录下 src/components/SvgIcon/index.vue <template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> <svg v
vue中使用svg icon
最新发布
m0_65894854的博客
03-05 1531
svg icon
项目中引用svg图标，公共组件SvgIcon使用，注册全局组件，使用自定义插件注册全局组件
x_nweBorder01k的博客
08-04 1172
项目中引用svg图标，公共组件SvgIcon使用，注册全局组件，使用自定义插件注册全局组件
Vue-使用svg-icon
qq_32644987的博客
10-19 958
1、svg svg是一种可缩放矢量图形：改变尺寸的情况下其图形质量不会有损失 可自定义填充颜色 2、创建svg-icon组件 3、引用svg文件 4、配置 5、使用svg-icon
SVGIcon 组件的构建与使用
quanxiangcloud的博客
04-18 2125
SVGIcon 是一个可以在项目任意地方使用的「图标组件」，组件使用者只需指定图标名称、颜色等属性，HTML 页面即可渲染出对应的 SVG 图标。本文将带大家了解 SVGlcon 组件的构建与使用。 背景 SVG 是什么？ SVG（Scalable Vector Graphics）可缩放矢量图形，是一种用于描述基于二维的矢量图形的 XML 标记语言，其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等，还能显示文字对象和嵌入式外部图像（包括 PNG、JPEG、SVG 等）。实际项目中大多数图标都是
Vue学习笔记 之 Svg图标组件的实现步骤
向心行者
07-14 731
svg-icon组件包括了svg文件（svg图片）、index.vue和index.js三部分内容。其中，svg文件，主要包括了各个图标对应的svg文件，上述vue.config.js文件中的配置，就是将该文件下的文件生成雪碧图；index.vue用来定义图标的vue组件；index.js实现了svg-icon组件的注册。具体实现如下：index.vue页面，代码如下：return {important;return {
第十一节 定制自己的svgIcon组件
01-10 1055
上一节我们安装并使用了elementPlus中的icon，这一节我们封装个自己的Icon组件，设计师或者在其他网站上下载个svg导入到根目录，结合我们的组件就可以用在页面上了。安装svg-sprite-loader创建自己的svgIcon组件。每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~
vue3 中组件开发规范
05-18
在Vue3中，组件开发规范主要包括以下方面： 1. 组件名称应该采用 PascalCase 命名规则，例如 MyComponent。 2. 组件的 data 必须是一个函数，返回一个对象，这是为了避免多个组件实例之间共享状态。 3. 组件的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值