当前位置: 首页 > news >正文

Vue封装全局SVG组件

1.SVG图标配置

1.安装插件

npm install vite-plugin-svg-icons -D

2.Vite.config.ts中配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {return {plugins: [createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),],}
}

3.main.ts中导入

//SVG插件必须的配置
import 'virtual:svg-icons-register'

4.组件内使用

1.下载svg代码

阿里巴巴图标库或者其他图标库下载SVG代码,复制到对应的文件中

2.SVG使用
<template><div><!-- svg:图标的外层节点,内部需要于use标签结合使用 --><svg style="width: 30px; height: 30px;"><!-- xlink:href执行用的图标,属性务必是#icon-图标名字 --><!-- use标签的fill属性为图标的颜色填充 --><use xlink:href="#icon-base" fill="blue"></use></svg></div>
</template><script setup lang="ts"></script><style scoped lang="scss"></style>

2.SVG组件封装

1.创建组件文件

2.封装组件 

<template><svg :style="{ width, height }"><use :xlink:href="prefix + name" :fill="color"></use></svg>
</template><script setup lang="ts">
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: '#icon-'},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: ''},//svg宽度width: {type: String,default: '16px'},//svg高度height: {type: String,default: '16px'}
})
</script><style scoped lang="scss"></style>

3.在其他组件使用

<template><div><SvgIcon name="base" width="30px" height="30px" color="blue"></SvgIcon></div>
</template><script setup lang="ts">
import SvgIcon from '@/components/Svg/index.vue'
</script><style scoped lang="scss"></style>

3.SVG组件注册为全局组件

1.创建文件

2.注册全局组件

//引入全局组件
import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
//全局对象
const components: { [name: string]: Component } = { SvgIcon };
//对外暴露插件对象
export default {//insatll方法install(app: App) {//注册项目为全局组件(可注册多个)Object.keys(components).forEach((key: string) => {//注册全局组件app.component(key, components[key]);})}
}

3.引入到main.ts

import gloablComponent from './components/index';
app.use(gloablComponent);

4.组件中使用

<template><div><SvgIcon name="base" width="30px" height="30px" color="blue"></SvgIcon></div>
</template><script setup lang="ts"></script><style scoped lang="scss"></style>

相关文章:

Vue封装全局SVG组件

1.SVG图标配置 1.安装插件 npm install vite-plugin-svg-icons -D 2.Vite.config.ts中配置 import { createSvgIconsPlugin } from vite-plugin-svg-icons import path from path export default () > {return {plugins: [createSvgIconsPlugin({// Specify the icon fo…...

课题学习(二)----倾角和方位角的动态测量方法(基于磁场的测量系统)

磁性测量工具安装在非磁性钻铤内&#xff0c;如图1&#xff0c;以避免磁性随钻测量工具测量时受到外部干扰。 测量系统采用三轴加速度计和三轴磁通门&#xff0c;并采用冗余设计&#xff0c;由于井下振动剧烈&#xff0c;陀螺仪的可靠性将大大降低。为了保证整个钻井过程中系统…...

Docker-Windows安装使用

1.下载docker https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors 2.配置虚拟化环境 通过控制面板“设置”启用 Hyper-V 角色 右键单击 Windows 按钮并选择“应用和功能”。选择相关设置下右侧的“程序和功能”。选择“打开或关闭 Windows 功能”。选择“Hyper-…...

在Windows11上安装ubuntu虚拟机

一开始是参考了 VMware17虚拟机安装Ubuntu最新版本(Ubuntu22.04LTS)详细步骤 专栏的1和2来的。但是后面总是提示operating system not found&#xff0c;就参考vmware安装ubuntu时总是提示operating system not found&#xff0c;选择典型安装而不是专栏选择的自定义安装&#…...

【微服务】spring 控制bean加载顺序使用详解

目录 一、前言 二、使用order注解控制顺序 2.1 order 注解使用示例 2.2 order注解顺序失效问题 2.2.1 order失效问题解决办法 2.3 实现Ordered接口 三、使用dependon注解控制顺序 四、AutoConfiguration注解控制bean加载顺序 4.1 AutoConfigureBefore 操作演示 4.2 A…...

python-切换镜像源和使用PyCharm进行第三方开源包安装

文章目录 前言python-切换镜像源和使用PyCharm进行第三方开源包安装1. 切换镜像源2. 使用PyCharm进行第三方开源包安装 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每…...

tp6 + swagger 配置文档接口

ThinkPHP 6.0 运行环境要求PHP7.2&#xff0c;兼容PHP8.1 安装 composer create-project topthink/think tp 6.0.*如果需要更新框架使用 composer update topthink/framework文档 完全开发手册 swagger 文档 注解文档 安装包 composer require zircote/swagger-php 引用…...

试图一文彻底讲清 “精准测试”

在软件测试中&#xff0c;我们常常碰到两个基本问题&#xff08;困难&#xff09;&#xff1a; 很难保障无漏测&#xff1a;我们做了大量测试&#xff0c;但不清楚测得怎样&#xff0c;对软件上线后会不会出问题&#xff0c;没有信心&#xff1b; 选择待执行的测试用例&#…...

Visual Studio 删除行尾空格

1.CtrlH 打开替换窗口&#xff08;注意选择合适的查找范围&#xff09; VS2010: VS2017、VS2022: 2.复制下面正则表达式到上面的选择窗口(注意前面有一个空格)&#xff1a; VS2010: $ VS2017、VS2022: $ 3.下面的替换窗口不写入 VS2010: VS2017、VS2022: 4.点选“正则表达式…...

LeetCode_BFS_中等_1926.迷宫中离入口最近的出口

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给你一个 m x n 的迷宫矩阵 maze &#xff08;下标从 0 开始&#xff09;&#xff0c;矩阵中有空格子&#xff08;用 ‘.’ 表示&#xff09;和墙&#xff08;用 ‘’ 表示&#xff09;。同时给你迷宫的入口 …...

开源Windows12网页版HTML源码

开源Windows12网页版HTML源码&#xff0c;无需安装就能用的Win12网页版来了Windows12概念版&#xff08;PoweredbyPowerPoint&#xff09;后深受启发&#xff0c;于是通过使用HTML、CSS、js等技术做了这样一个模拟板的Windows12系统&#xff0c;并已发布至github进行开源。 这…...

vscode中使用指定路径下的cmake

在 Visual Studio Code 中指定自定义的 CMake 路径&#xff0c;你可以通过以下步骤来实现&#xff1a; 打开你的 CMake 项目所在的文件夹&#xff0c;在 Visual Studio Code 中。 在项目文件夹中&#xff0c;创建一个名为 .vscode 的文件夹&#xff0c;如果它还不存在。 在 .…...

复杂度分析

文章目录 如何分析、统计算法的执行效率和资源消耗&#xff1f;为什么需要复杂度分析&#xff1f;测试结果非常依赖测试环境测试结果受数据规模的影响很大 大O复杂度表示法时间复杂度分析只关注循环次数最多的一段代码加法法则&#xff1a;总复杂度等于量级最大的那段代码的复杂…...

Linux安装jrockit-jdk1.6.0_29-R28.2.0-4.1.0-linux-x64

下载软件&#xff1a;jrockit-jdk1.6.0_29-R28.2.0-4.1.0-linux-x64.bin 执行安装 ./jrockit-jdk1.6.0_29-R28.2.0-4.1.0-linux-x64.bin 安装提示&#xff0c;一路next&#xff0c;注意第二步修改安装的路径&#xff0c;请修改成&#xff1a; <------------------------ O…...

7.2 怎样定义函数

7.2.1 为什么要定义函数 主要内容&#xff1a; 为什么要定义函数 C语言要求所有在程序中用到的函数必须“先定义&#xff0c;后使用”。这是因为在调用一个函数之前&#xff0c;编译系统需要知道这个函数的名字、返回值类型、功能以及参数的个数与类型。如果没有事先定义&…...

Chrome扩展V2到V3的变化

Chrome扩展manifest V3变化、升级迁移指南_chrome_ZK645945-华为云开发者联盟 (csdn.net) 1.background //V2 "background": "background.js"//V3 "background": {"service_worker": "background.js"} 2.executeScript …...

lock、tryLock、lockInterruptibly有什么区别?

lock、tryLock 和 lockInterruptibly 都是用于线程同步的方法,但它们有不同的行为和用途: lock() 方法:lock() 方法是 Java 中 Lock 接口定义的一部分,它用于获取锁并阻塞当前线程,直到锁可用为止。如果锁当前被其他线程占用,lock() 方法会导致当前线程阻塞,直到锁被释放…...

mysql面试题5:索引、主键、唯一索引、联合索引的区别?什么情况下设置了索引但无法使用?并且举例说明

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说索引、主键、唯一索引、联合索引的区别? 索引、主键、唯一索引和联合索引是数据库中常用的索引类型,它们有以下区别: 索引:索引是一种数…...

数据集笔记:纽约花旗共享单车od数据

花旗共享单车公布的其共享单车轨迹数据&#xff0c;包括2013年-2021年曼哈顿、布鲁克林、皇后区和泽西城大约14500辆自行车和950个站点的共享单车轨迹数据 数据地址&#xff1a;Citi Bike System Data | Citi Bike NYC | Citi Bike NYC 性别&#xff08;0未知&#xff1b;1男&…...

为什么 0.1+0.2 不等于 0.3

为什么 0.10.2 不等于 0.3 在 JavaScript 中&#xff0c;0.1 0.2 的结果不等于 0.3&#xff0c;这是因为在 JavaScript 中采用的是双精度浮点数格式&#xff08;64 位&#xff09;&#xff0c;而在这种格式下无法精确表示某些小数&#xff0c;因此在进行计算时会出现精度误差。…...

OpenClaw故障自愈方案:百川2-13B模型异常日志分析与重试机制

OpenClaw故障自愈方案&#xff1a;百川2-13B模型异常日志分析与重试机制 1. 问题背景与需求场景 上周我在用OpenClaw对接百川2-13B模型处理夜间自动化任务时&#xff0c;遇到了一个典型问题&#xff1a;凌晨3点突然收到飞书告警&#xff0c;显示"模型响应超时"。当…...

AI读脸术本地运行:私有化部署人脸分析系统详细步骤

AI读脸术本地运行&#xff1a;私有化部署人脸分析系统详细步骤 1. 什么是AI读脸术&#xff1a;不联网也能识别人脸属性 你有没有想过&#xff0c;一张普通照片里藏着多少信息&#xff1f;比如这张自拍——不用上传到任何云端服务&#xff0c;也不用担心数据被谁看到&#xff…...

Vue.js前端项目集成AI:SmallThinker-3B-Preview实现智能表单与对话

Vue.js前端项目集成AI&#xff1a;SmallThinker-3B-Preview实现智能表单与对话 1. 引言&#xff1a;当Vue.js遇见AI 你有没有遇到过这样的场景&#xff1f;用户填写一个复杂的表单&#xff0c;面对几十个选项不知所措&#xff1b;或者客服系统里&#xff0c;用户问了一个稍微…...

OpenClaw私有化部署指南:Qwen3-VL:30B+飞书智能助手

OpenClaw私有化部署指南&#xff1a;Qwen3-VL:30B飞书智能助手 1. 为什么选择本地化部署&#xff1f; 去年我接手了一个需要处理大量敏感数据的项目&#xff0c;团队最初尝试使用公有云API&#xff0c;但很快遇到了数据合规问题。这促使我开始研究本地化AI解决方案&#xff0…...

收藏!小白也能看懂:Transformer残差连接新处理方式,大模型学习必备!

本文介绍了Kimi团队提出的一种新的Transformer残差连接处理方式&#xff0c;旨在解决传统Transformer模型中“PreNorm稀释”问题。通过引入“注意力残差”&#xff0c;每一层使用Softmax机制选择性地组合前层输出&#xff0c;有效缓解了深层网络训练中的梯度消失问题。此外&…...

Blaze分块计算优化技巧:5个方法提升大数据处理性能

Blaze分块计算优化技巧&#xff1a;5个方法提升大数据处理性能 【免费下载链接】blaze NumPy and Pandas interface to Big Data 项目地址: https://gitcode.com/gh_mirrors/bl/blaze Blaze是一个强大的大数据处理工具&#xff0c;它通过分块计算技术为NumPy和Pandas提供…...

前端面试高频考点总结(不仅有考点,还有对应解答)

2026年 AI面试 经验分享 前端面试核心要点 技术考察转向实际场景与新兴技术&#xff0c;重点包括&#xff1a; JavaScript/TypeScript核心机制与编码能力React/Vue3的高阶特性与原理工程化与性能优化体系网络/安全与综合性场景题 3-5年经验者需突出&#xff1a; 技术原理深度&a…...

【服务器】上传百度网盘数据至服务器

目录方法一&#xff1a;使用开源命令行工具 BaiduPCS-Go (最推荐)实例&#xff1a;下载网盘数据实例&#xff1a;上传服务器数据至百度网盘单个文件测试上传批量裁剪文件参考方法一&#xff1a;使用开源命令行工具 BaiduPCS-Go (最推荐) 这是目前在 Linux/Windows 服务器上最流…...

零代码部署YOLOv9:官方镜像5分钟快速上手,实测效果惊艳

零代码部署YOLOv9&#xff1a;官方镜像5分钟快速上手&#xff0c;实测效果惊艳 1. 为什么选择YOLOv9官方镜像 目标检测领域的最新突破YOLOv9已经发布&#xff0c;但很多开发者在尝试部署时遇到了各种环境配置问题。这个官方预构建的镜像解决了三大核心痛点&#xff1a; 环境配置…...

实战指南:基于快马生成的原型开发智能设备手机管理后台

实战指南&#xff1a;基于快马生成的原型开发智能设备手机管理后台 最近在做一个智能家居设备的项目&#xff0c;需要给用户提供一个手机端的配置管理界面。想到很多家用路由器都是用192.168.1.1这样的地址进行管理&#xff0c;就决定用这个作为切入点&#xff0c;开发一个类似…...