首页 > 其他分享 >封装Vue 的 SVG 组件

封装Vue 的 SVG 组件

时间:2024-07-31 10:08:37浏览次数:8  
标签:Vue 封装 12px color SVG vue svg 组件 svgIcon

svg静态资源

在assets下新建一个 svg 文件夹,用于存放svg图片

svgIcon组件

在components 下新建一个文件夹,包含两个文件index.ts和SvgIcon.vue

vue.config.js

main.ts

需要引入组件svgIcon

使用

**.vue

<svg-icon iconClass="invite" className="icon icon-invite" />

 

**.scss


.icon-invite {

width: 12px;

height: 12px;

color: var(--color-primary);

}

 

标签:Vue,封装,12px,color,SVG,vue,svg,组件,svgIcon
From: https://www.cnblogs.com/shellon/p/18333995

相关文章

  • Java中的封装
    在Java中,封装(Encapsulation)是面向对象编程(OOP)的四大特性之一(其他三个是继承、多态和抽象)。封装主要用来隐藏对象的属性和实现细节,仅对外公开接口(方法),与对象交互只能通过这些接口进行。这样做的好处包括提高代码的安全性、灵活性和可维护性。如何进行简单封装1.使用访问修饰......
  • 这本vue3编译原理开源电子书,初中级前端竟然都能看懂
    前言众所周知vue提供了很多黑魔法,比如单文件组件(SFC)、指令、宏函数、cssscoped等。这些都是vue提供的开箱即用的功能,大家平时用这些黑魔法的时候有没有疑惑过一些疑问呢。我们每天写的vue代码一般都是写在*.vue文件中,但是浏览器却只认识html、css、js等文件类型,明显是不认......
  • [vue3] Vue3源码阅读笔记 reactivity - collectionHandlers
    源码位置:https://github.com/vuejs/core/blob/main/packages/reactivity/src/collectionHandlers.ts这个文件主要用于处理Set、Map、WeakSet、WeakMap类型的拦截。拦截是为了什么?为什么要处理这些方法?Vue3实现响应式的思路是使用ProxyAPI在getter中收集依赖,在setter触发更新......
  • [vue3] Vue3源码阅读笔记 reactivity - collectionHandlers
    源码位置:https://github.com/vuejs/core/blob/main/packages/reactivity/src/collectionHandlers.ts这个文件主要用于处理Set、Map、WeakSet、WeakMap类型的拦截。拦截是为了什么?为什么要处理这些方法?Vue3实现响应式的思路是使用ProxyAPI在getter中收集依赖,在setter触发更新......
  • 基于ssm+vue医院住院管理系统源码数据库
    摘 要随着时代的发展,医疗设备愈来愈完善,医院也变成人们生活中必不可少的场所。如今,已经2021年了,虽然医院的数量和设备愈加完善,但是老龄人口也越来越多。在如此大的人口压力下,医院住院就变成了一个问题。目前预约住院看病住院在国内已经是一种习惯了,在欧美国家,除了急诊,患者看......
  • vue模板中使用临时变量实例,for 循环中使用临时变量继承函数运行结果示例,函数运行结果
    示例代码<!--vue模板中使用临时变量测试示例--><template><divclass="component-name"><!--vue模板中循环定义临时变量实现--><divv-for="iteminitems":key="item.id":data-item="(itemTemp=formatter......
  • 环形表示进度 css+js+svg
    先看看我做出来的效果人狠话不多直接上代码html部分<divid="box"></div>css部分#box{width:400px;height:400px;background-color:#00E8D7;display:flex;}.circleBox{width:33.333%;display:flex;f......
  • springboot+vue基于微服务架构的设备管理系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着企业规模的不断扩大与信息化程度的日益加深,设备管理成为企业运营中不可或缺的一环。传统集中式架构的设备管理系统在面对大规模数据处理、高并发访问及系统扩展性等方面显得力不从心。微服务架构以其高度的模块化、灵活的服务部署......
  • 基于SpringBoot+Vue的电影院订票信息管理系统的详细设计和实现(源码+lw+部署文档+讲解
    文章目录前言详细视频演示项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • 基于SpringBoot+Vue的甘肃旅游管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    文章目录前言详细视频演示项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......