vue3 +TS + vite + SVG

如何在如题的项目中使用svg?

我当时首先想到的是 搬运vue2 中svg的使用方式,安装svg-sprite-loader 和做相应的封装。(vue2+ svg)你会发现 行不通,因为本项目使用的是vite 构建的无法使用Webpack所以如下代码不执行的

// 自动化加载
// webpack的require.context方法自动化加载

const req = require.context('./svg', false, /\.svg$/)
// req.keys()  拿到上下文中所有的文件名称
req.keys().map(req)

现在该如何自动引入相应的svg 文件并使用的呢(irritated)

翻阅vite 文档你会发现:Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块,默认这个方法是异步的,我们需要加上第二个参数{ eager: true }同步获取.
语法:

const modules = import.meta.glob('./dir/*.vue', { eager: true })

我的使用方式

  • 首先在src的components下 新建icons文件夹
  • 然后在icons 文件夹中建一个svg文件夹(存放svg文件)和 一个index.vue(用于导出svg)文件
    1:目录如下
    在这里插入图片描述
    2:svg文件如下
    在这里插入图片描述
    3: index.vue 如下
<script setup lang="ts">
import { shallowRef, defineAsyncComponent, type Component, computed, withDefaults } from 'vue'
interface Props {
  iconName: string,
  viewBox: string
}
const props = withDefaults(defineProps<Props>(), {
  iconName: '',
  viewBox: ''
})
// 动态获取异步组件集合

const modules = import.meta.glob('./svg/*.vue')
// 声明一个对象承载异步加载来的组件
// let comObj:Record<string, object> = {}
// for (const path in modules) {
//     // 获取组件文件的名称,这里以vue文件名称作为对象的key
//     const key:string = path.replace(/(.*\/)*([^.]+).vue/ig, "$2")
//     if (key === props.iconName) {
//       comObj[key] = defineAsyncComponent(() =>  
//         import(path)
//       )
//     }
    
// }
let Comp: Component = null
const item:Array<string, () => Component> = Object.entries(modules).find(item => item[0].includes(props.iconName))
if (item) {
  Comp = defineAsyncComponent(item[1])
}
// 所有动态加载的异步组件集合
const comp = shallowRef<Component>(Comp)

</script>
<template>
  <component :is="comp" class="svg-icon" :viewBox="viewBox" />
</template>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

  • 具体使用如下
// 先引入
import SvgIcon from '@/components/icons/index.vue'
// 使用
<span class="svg-container">
   <svg-icon icon-name="IconUser" viewBox="0 0 120 120" width="100" height="100" />
</span>

上述代码有个细节点 注意,那就是 viewBox width height 属性 用于控制svg 展示的大小的;

  • 具体效果如下图
    在这里插入图片描述
    完结 撒花
    有不对的地方,欢迎批评指正,谢谢

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Mysql高可用|索引|事务 | 调优

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 文章目录 前言sql语句的执行顺序关键词连接名字解释sql语句 面试坑点存储引擎MYSQL存储引擎 SQL优化索引索引失效索引的数据结构面试坑点 锁事务四大特性事务的隔离级别MVCC 读写分离面试坑…

大师学SwiftUI第12章 - 手势 Part 1

手势识别器 手势是用户在屏幕上执行的动作&#xff0c;如点击、滑动或捏合。这些手势很难识别&#xff0c;因为屏幕上只能返回手指的位置。为此&#xff0c;Apple提供了手势识别器。手势识别器完成所有识别手势所需的计算。所以我们不用处理众多的事件和值&#xff0c;只需在等…

公共字段自动填充——后端

场景&#xff1a;当处理一些请求时&#xff0c;会重复的对数据库的某些字段进行赋值&#xff08;如&#xff1a;在插入和更新某个物品时&#xff0c;需要更新该物品的更新时间和更新者的信息&#xff09;&#xff0c;这样会导致代码冗余。 如&#xff1a; 思路&#xff1a; 自…

避免付费搜索广告系列与有机搜索广告系列之间出现关键词蚕食现象

自然搜索&#xff08;搜索引擎优化&#xff09;和付费搜索&#xff08;或按点击付费&#xff09;具有足够的技术复杂性和战略方面。 关键词蚕食是一个可能使它们变得更加困难的问题——如果你的搜索引擎优化 &#xff08;SEO&#xff09; 和按点击付费 &#xff08;PPC&#x…

【Python】获取B站粉丝列表保存至数据库中

分析网络请求&#xff0c;获取到有粉丝接口的数据url 可以在响应信息处看到粉丝的信息 通过浏览器也可以直接请求到具体的JSON信息 通过独立的标签我们可以看到接口数据&#xff0c;但是要注意如果不是查看自己登录账户的接口那么就无法查询到所有粉丝的数据&#xff0c;默认只…

Python通过函数名调用函数的几种场景

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 如果有什么疑惑/资料需要的可以点击文章末尾名片领取源码 除了执行系统命令外&#xff0c;我们有时还需要动态地执行一些python代码&#xff0c;有经验的朋友就会知道可以使用内置函数eval实现这一需求&#xff0c;如eval(“…

Appcelerator打包ipa有哪些优势

大家好&#xff0c;我是咕噜-凯撒&#xff0c;我们得先知道Appcelerator是啥&#xff0c;Appcelerator&#xff08;现在更名为Axway Titanium&#xff09;是一个跨平台的移动应用开发框架通过提供一种简化和加速移动应用开发的方式帮助你构建高质量的跨平台应用程序。那使用App…

【基础篇】YOLO系列训练环境(GPU)搭配篇

🚀Pytorch环境配置(Windows) 🔨 Anaconda安装 此处下载安装即可 ⭐温馨提示:安装路径不能含有中文,建议不要安在c盘(很占内存) 环境变量配置 编辑系统环境变量 -> 环境变量 -> 系统变量 新建并添加以下路径 打开cmd,输入conda&

设计模式—装饰模式

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 装饰模式—穿衣服&#x1f48e;总结 装饰模式—穿衣服 装饰模式&#xff08;Decorator&#xff09;可以动态的给对象添加一些额外的职责。 Component是定义一个对象接口&#xff0c;可以给这些对象动态地添加职责。…

【深度学习目标检测】十、基于yolov5的火灾烟雾识别(python,目标检测)

YOLOv5是目标检测领域一种非常优秀的模型&#xff0c;其具有以下几个优势&#xff1a; 1. 高精度&#xff1a;YOLOv5相比于其前身YOLOv4&#xff0c;在目标检测精度上有了显著的提升。YOLOv5使用了一系列的改进&#xff0c;如更深的网络结构、更多的特征层和更高分辨率的输入图…

Vditor - Markdown编辑器使用

1、安装 yarn add vditor2、代码 import vditor/dist/index.css; import React, { useEffect } from react; import Vditor from vditor; import ./index.less;const App ({ setVditorValue, vditorValue }: any) > {const [vd, setVd] React.useState<Vditor>();…

Redis-网络模型

参考资料 &#xff1a;极客时间 Redis&#xff08;亚风&#xff09; 前置知识 系统隔离 为了避免⽤户应⽤导致冲突甚⾄内核崩溃&#xff0c;⽤户应⽤与内核是分离的&#xff1a; 进程的寻址空间会划分为两部分&#xff1a;内核空间、⽤户空间 • ⽤户空间只能执⾏受限的命令&…

激活函数-SwiGLU

SwiGLU SiLU 函数是一种神经网络中的激活函数&#xff0c;全称是 Sigmoid Linear Unit, 也被称为 Swish 函数。它由 Google Brain 在 2017 年提出&#xff0c;是一种非线性激活函数&#xff0c;能够有效地对神经网络的输入进行非线性变换。 定义 f ( x ) x ∗ σ ( x ) f(x)…

vue3使用vue-router嵌套路由(多级路由)

文章目录 1、Vue3 嵌套路由2、项目结构3、编写相关页面代码3.1、编写route文件下 index.ts文件3.2、main.ts文件代码&#xff1a;3.3、App.vue文件代码&#xff1a;3.4、views文件夹下的Home文件夹下的index.vue文件代码&#xff1a;3.5、views文件夹下的Home文件夹下的Tigerhh…

生命在于学习——TV电视盒子渗透测试抓包设置

一、前言 封面图是示例图&#xff0c;因为涉及到保密&#xff0c;所以本次测试的电视盒子不放出外观和设置界面。 这一次要测试电视盒子&#xff0c;大家也都知道&#xff0c;市面上的电视盒子大部分都是Android&#xff0c;当然&#xff0c;要使用笔记本去抓电视盒子的数据包…

圣诞节来了,为大家送上专属圣诞树

Hello大家好&#xff0c;我是Dream。 今天给大家分享一下我很早之前做过的圣诞树&#xff0c;分享给大家&#xff0c;希望可以帮助到大家度过一个浪漫的圣诞节~ Python打造专属于你的圣诞树落叶雪花背景音乐浪漫弹窗 五合一版圣诞树 一、背景故事圣诞节风波❤️❤️❤️ 二、五…

针对海量数据的存储与访问瓶颈的解决方案

背景 在当今这个时代&#xff0c;人们对互联网的依赖程度非常高&#xff0c;也因此产生了大量的数据&#xff0c;企业视这些数据为瑰宝。而这些被视为瑰宝的数据为我们的系统带来了很大的烦恼。这些海量数据的存储与访问成为了系统设计与使用的瓶颈&#xff0c;而这些数据往往存…

内网BUG管理系统本地部署并结合内网穿透实现异地远程访问

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

Windows如何安装使用TortoiseSVN客户端并实现公网访问本地SVN Server

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…

泛型深入理解

泛型的概述 泛型&#xff1a;是JDK5中引入的特性&#xff0c;可以在编译阶段约束操作的数据类型&#xff0c;并进行检查。 泛型的格式&#xff1a;<数据类型>; 注意&#xff1a;泛型只能支持引用数据类型。 集合体系的全部接口和实现类都是支持泛型的使用的。 泛型的…