vue3 引入svg 图片的详细方法

news2024/12/23 14:52:22

我们都知道 svg 文件比图片小的多,可以节省很多空间,这对页面性能来说是个很大的提升。
下面介绍一下 vue3 项目中使用 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 cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

(3)在入口文件下导入
main.ts

import 'virtual:svg-icons-register'

(4)在页面中使用

<svg>
    <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->
    <!-- use标签fill属性可以设置图标的颜色 -->
    <use xlink:href="#icon-lock" fill="red"></use>
  </svg>

额外说明:我的 svg 文件是放在 assets/icons 下的。

(5)最终实现效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于GIS、python机器学习技术的地质灾害风险评价与信息化建库

入门篇&#xff0c;ArcGIS软件的快速入门与GIS数据源的获取与理解&#xff1b;方法篇&#xff0c;致灾因子提取方法、灾害危险性因子分析指标体系的建立方法和灾害危险性评价模型构建方法&#xff1b;拓展篇&#xff0c;GIS在灾害重建中的应用方法&#xff1b;高阶篇&#xff1…

数字化转型核心 数据治理神器Hadoop 生态介绍HDFS、Yarn以及HBase/Hive

大数据Hadoop 生态的三大部件的目录 往期热门专栏回顾前言1、HDFS2、Yarn3、Hive4、HBase4.1&#xff0e;特点4.2&#xff0e;存储 5、Spark及Spark Streaming关于作者 往期热门专栏回顾 专栏描述Java项目实战介绍Java组件安装、使用&#xff1b;手写框架等Aws服务器实战Aws L…

BioXcell InVivoPlus anti-mouse Ly6G及部分参考文献

BioXcell InVivoPlus anti-mouse Ly6G 1A8单克隆抗体与小鼠Ly6G反应。Ly6G分子量为21-25kDa&#xff0c;是GPI锚定的细胞表面蛋白Ly-6超家族的成员&#xff0c;在细胞信号传导和细胞粘附中发挥作用。Ly6G在发育过程中由骨髓谱系中的细胞&#xff08;包括单核细胞、巨噬细胞、粒…

Edge浏览器控制台(F12)中网络不显示接口信息

&#x1f413;情况描述 点击页面接口&#xff0c;控制台中网络选项中无法显示其接口信息 &#x1f413;问题解决 1.查看接口是否开启筛选&#xff0c;如果开启更改为全部即可 2.如果非上述情况&#xff0c;则可能是浏览器配置的问题&#xff0c;将浏览器配置可能有所变动 将浏…

【CASS精品教程】CASS添加标准图幅(50×50cm+50×40cm)

大比例尺地形图图幅一般分为正方形和矩形分幅两种,本文讲解CASS中添加标准图幅(5050cm、5040cm)的方法。 文章目录 一、CASS参数配置二、添加标准图幅(5050cm)三、添加标准图幅(5040cm)打开基于CASS自带案例数据study.dat绘制好的地形图study.dwg,如下图所示,下面来演示两种…

需求生命周期管理

背景 回顾很多项目或者产品&#xff0c;我们发现现在的版本和当初的理解或者设想是天壤之别&#xff0c;这是什么原因&#xff0c;对于这种情况又应该如何处理呢&#xff1f; 业务分析的交付物是需求文档&#xff0c;业务分析整个过程随着对业务的逐步深入&#xff0c;观察视…

基于Java在线考试系统系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

推荐几个python的工具

Beautiful Soup Beautiful Soup用于清理和提取HTML和XLM中的数据。 它用于解析HTML文本&#xff0c;并允许数据科学家将文本数据转换为结构化数据&#xff0c;只需几行代码&#xff0c;就可以提取复杂的HTML数据。在某些情况下&#xff0c;您只需要一个表标签&#xff0c;并且…

后端前行Vue之路(一):初识Vue

1.Vue是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方…

C++资产设备管理系统

一、引言 1.1 项目设计背景及意义 1.1.1理论研究基础 &#xff08;1&#xff09;C在C的基础上增加了面向对象的机制。 &#xff08;2&#xff09;充分利用面向对象机制中的多态性实现函数的设计。 1.1.2 技术层面的支持 运用系统为C面向对象程序设计提供的各种设计方法和V…

国外创意二维码广告:芬兰知名狗粮品牌如何在用AI技术说狗话?

AI 的飞速发展&#xff0c;极大地促进了各行各业的技术更迭&#xff0c;随之出现的是许多创意应用。比如&#xff0c;这次的户外创意广告案例中&#xff0c;AI面部识别技术就被用到了宠物狗身上。 今年3月份&#xff0c;芬兰一家知名的狗粮品牌Hau-Hau Champion &#xff0c;在…

基于java实现的高校二手交易平台

开发语言&#xff1a;Java 框架&#xff1a;ssm 技术&#xff1a;JSP JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclip…

ZYNQ学习之Ubuntu环境下的Shell与APT下载工具

基本都是摘抄正点原子的文章&#xff1a;<领航者 ZYNQ 之嵌入式Linux 开发指南 V3.2.pdf&#xff0c;因初次学习&#xff0c;仅作学习摘录之用&#xff0c;有不懂之处后续会继续更新~ 一、Ubuntu Shell操作 简单的说Shell 就是敲命令。国内把 Linux 下通过命令行输入命令叫…

Linux_进程概念_冯诺依曼_进程概念_查看进程_获取进程pid_创建进程_进程状态_进程优先级_环境变量_获取环境变量三种方式_3

文章目录 一、硬件-冯诺依曼体系结构二、软件-操作系统-进程概念0.操作系统做什么的1.什么叫做进程2.查看进程3.系统接口 获取进程pid- getpid4.系统接口 获取父进程pid - getppid5.系统接口 创建子进程 - fork1、手册2、返回值3、fork做了什么4、基本用法 6.进程的状态1、进程…

智慧工地安全生产与风险预警大平台的构建,需要哪些技术?

随着科技的不断发展&#xff0c;智慧工地已成为现代建筑行业的重要发展趋势。智慧工地方案是一种基于先进信息技术的工程管理模式&#xff0c;旨在提高施工效率、降低施工成本、保障施工安全、提升施工质量。一般来说&#xff0c;智慧工地方案的构建&#xff0c;需要通过集成物…

2024年做视频号小店是不是明智之举?这篇文章告诉你答案

大家好&#xff0c;我是电商糖果 视频号自从去年电商的知名度打开之后&#xff0c;不少朋友都盯上这块肥肉。 要知道现在可是短视频电商的时代&#xff0c;抖音&#xff0c;快手靠做电商赚了不少钱。 视频号又怎么会放过这次的风口呢&#xff1f; 也有不少想做电商的朋友问…

安卓SharedPreferences使用

目录 一、简介二、使用2.1 getSharedPreferences2.2 增加数据2.3 读取数据2.4 删除数据2.5 修改数据2.6 清除数据2.7 提交数据 一、简介 SharedPreferences是Android平台上一个轻量级的存储类&#xff0c;主要是保存一些常用的配置比如窗口状态&#xff0c;一般在Activity、重…

《Linux运维实战:达梦DM8数据库之开启本地归档》

一、归档概述 在达梦数据库归档模式下&#xff0c;数据库同时将重做日志写入联机日志文件和归档日志文件中分别进行存储。采用归档模式会对系统的性能产生影响&#xff0c;然而&#xff0c;当系统一旦出现介质故障&#xff0c;如磁盘损坏时&#xff0c;利用归档日志&#xff0c…

康耐视visionpro-CogToolBlock工具详细说明

CogToolBlock功能: 将多个工具组合在一起完成某个功能&#xff0c;接口简单且可以重用 CogToolBlock操作说明&#xff1a; 1.打开工具栏&#xff0c;双击或点击鼠标拖拽添加CogToolBlock CogToolBlock操作说明 ②.添加输入图像&#xff0c;右键“链接到”或以连线拖拽的方式选…

【JavaWeb】Day22.maven安装介绍

目录 一.初识Maven 什么是maven? Maven的作用 二.Maven概述 1. Maven介绍 2.Maven模型 3. Maven仓库 三. Maven安装 1.下载 2. 安装步骤 1. 解压安装 2. 配置本地仓库 3.配置阿里云私服 4. 配置Maven环境变量 一.初识Maven 什么是maven? Maven是apache旗下的一个…