封装svg通用组件
- 安装
vite-plugin-svg-icons
插件
pnpm i vite-plugin-svg-icons -D
- 在main.ts中引入
vite-plugin-svg-icons
import 'virtual:svg-icons-register'
- 创建
src/assets/icons
目录,用来存放svg图片
- 配置
vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
plugins: [
vue(),
createSvgIconsPlugin({
// 指定要缓存的文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
],
- 封装SvgIncon通用组件
<template>
<div>
<svg :style="{ width, height }">
<use :xlink:href="prefix + name" :fill="color" />
</svg>
</div>
</template>
<script setup lang="ts" name="svgIcon">
defineProps({
prefix: {
type: String,
default: '#icon-'
},
name: {
type: String,
default: ''
},
color: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
})
</script>
<style scoped></style>
xlink:href:
图片名称fill:
图片颜色,如果这里不生效,可以去svg图片里,把fill相关属性删除即可
- 使用
<template>
<div>
<svg-icon name="demo" color="green"></svg-icon>
</div>
</template>
<script setup lang="ts">
import SvgIcon from '@/components/SvgIncon/index.vue'
</script>
<style scoped></style>
这里是需要引入SvgIcon组建的,可以考虑把该组件做全局注册,那样在使用的时候就不用到处注册了
封装svg通用组件的更多相关文章
- vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...
- 封装全局icon组件 svg (仿造element-ui源码)
一.引入 svg-sprite-loader 插件 npm install svg-sprite-loader --save-dev vue-cli项目默认情况下会使用 url-loader 对sv ...
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- 继续封装个 Volley 组件
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 前面已经封装了很多常用.基础的组件了:base-module, 包括了: crash 处理 常用工具类 apk 升级处理 log 组 ...
- Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...
- OAuth2 通用组件源码下载(支持新浪微博、QQ、淘宝)(转载)
转载地址:http://www.cyqdata.com/download/article-detail-54302 OAuth2 社区通用组件说明: 源码为C#(.NET)写成,目前支持新浪微博. ...
- 【干货】.NET开发通用组件发布(一) 介绍
组件介绍 集合个人和团都开发中遇到的一些通用组件,邮件发送组件.内容采集.CSV数据文件导入工具.日志记录组件.MVC验证登陆组件.MVC分页组件.短信发送组件和强大的Repeate和Repeater ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 【译】编写支持SSR的通用组件指南
原文来自:https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?utm_campaign=Vu ...
随机推荐
- GaussDB(for MySQL)剪枝功能,让查询性能提升70倍!
作者,祝青平,华为云数据库内核高级工程师.擅长数据库优化器内核研发,9年数据库内核研发经验,参与多个TP以及AP数据库的研发工作. 近日,华为云数据库社区下面有这样一条用户提问留言:请问,如何通过My ...
- QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索、支持海量数据、跨语种问答
QAnything本地知识库问答系统:基于检索增强生成式应用(RAG)两阶段检索.支持海量数据.跨语种问答 QAnything (Question and Answer based on Anythi ...
- 【编写环境一】遇到常见python函数处理方式
1.python实现两个一维列表合并成一个二维列表 >>> list1 = [1,2,3,4,4] >>> list2 = [2,3,4,5,2] >> ...
- LyScriptTools 调试控制类API接口手册
LyScriptTools模块中的DebugControl类主要负责控制x64dbg调试器的行为,例如获取或设置寄存器组,执行单步命令等,此类内的方法也是最常用的. 插件地址:https://gith ...
- MySQL 数据库读写分离
MySQL 是最流行的关系型数据库管理系统,MySQL 配置主备模式,基于一台服务器的数据复制,故得名单机热备,主-备 Active-Standby主-备方式,即指的是一台服务器处于某种业务的激活状态 ...
- java在服务器上创建文件(以shell脚本为例)并执行
java在服务器上创建文件(以shell脚本为例)并执行 1️⃣ 首先写个方法,来在服务器上创建脚本 package com.preciouslove.xinxin_emo.controller; i ...
- Java并发(七)----线程sleep、yield、线程优先级
1.sleep 与 yield sleep 调用 sleep 会让当前线程从 Running 进入 Timed Waiting 状态(阻塞) 其它线程可以使用 interrupt 方法打断正在睡眠的线 ...
- 2.列表--《Python编程:从入门到实践》
2.1 列表 列表由一系列按特定顺序排列的元素组成.在Python中,用方括号([])来表示列表,并用逗号来分隔其中的元素. bicycles = ['trek', 'cannondale', ' ...
- sshd命令-测试sshd_config配置是否正确
sshd命令来自于英文词组"SSH daemon"的缩写,其功能是用于openssh服务器守护进程.openssh套件能够为两台主机之间建立加密的.可信任的数据通信服务,是rlog ...
- ABC 313
前三题过水. D题 与 5+*的题解 注意:交互题每输出一次,就要 fflush(stdout); 一次 E 其实不是太难,但是赛时一直在搓 D 还没搓出来 首先如果有两个大于 \(1\) 的数相邻, ...