vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改_vue3 img svg_luck_lin的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
一、components下创建自定义公共svg组件

zc-svg.vue:
<template>
  <div class="svgBox" :style="{ width: `${size}px`, height: `${size}px` }">
      :src="require(`./${type}.svg`)"
      v-bind="{ alt: alt || type, width: size, height: size }"
      :style="color ? { marginLeft: `-${size}px`, filter: `drop-shadow(${color} ${size}px 0)` } : null"
  </div>
</template>
<script>
 * @type 图标类型
 * @size 图标尺寸
 * @color 图标颜色
 * @alt img的alt属性，seo需要，默认取值type
 * description：如果有动态颜色在页面组件中通过css修改,如下
 *  /deep/ img {
 *   margin-left: -20px;
 *   filter: drop-shadow(red 20px 0);
export default {
  props: {
    type: {
      type: String,
      require: true
    size: {
      type: Number | String,
      default: 20
    color: String,
    alt: String
</script>
<style lang="less" scoped>
.svgBox {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  img {
    float: left;
</style>
二、注册和使用
 
Vue.component('ZcSvg', ZcSvg) //可在全局文件注册
<ZcSvg type="shandian" />
                    前言svg的优点不多说，怎么在vue项目优雅的使用svg？通过img似乎很优雅简单，但是你知道通过img引入svg怎么更改颜色吗？知道怎么动态切换颜色吗？一、components下创建自定义公共svg组件zc-svg.vue:&lt;template&gt;  &lt;div class="svgBox" :style="{ width: `${size}px`, height: `${size}px` }"&gt;    &lt;img      :src="require(`./${ty
				SVG格式在vue中的使用
SVG：svg是一种图像文件格式，它是可缩放的矢量图形，它是基于XML，由World Wide Web Consortium
（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、
高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打
开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
我们可以在阿里巴巴矢量图标库里面下载
[阿里巴巴矢量图标库](https://ww.
				在小程序中使用 image 标签显示 SVG 图片可以使用下面的方式：
将 SVG 图片转换为 base64 编码的字符串，并将其作为 image 标签的 src 属性的值。
在 image 标签的样式中添加 "mode" 属性，并将其值设置为 "widthFix"，这样图片就可以根据容器的宽度进行等比缩放。
在 image 标签的样式中添加 "lazy-load" 属性，并将其值设置为 "...
				Vue3 + Vite 动态引入图片
开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错
require is not defind
查看vite官方网站
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可
				好多时候，我们使用是svg都是动态的，就会有不同的src，这时，src就需要是一个动态的变量。我们按常规配置：
模板使用
上面这样使用，在本地都是找不到文件的。
但是直接在模板中这样使用是可以的
这是因为，把变量解析成了字符串，没有按路径去查找。
模板使用
上述这样使用，在本地是没有问题的，但是部署到线上就找不到了，查看源代码，线上把src最终解析成了[Object Object],可见打包后，没有去解析出真正的路径。
费了老半天劲，各种方式去试过，最后在vite文档中找到了答案；
URL方式，不能使用模板
1、使用传统的svg图：
首先新建一个svg.vue文件，在该文件中使用svg标签定义一堆svg图，再分别用symbol标签分别定义一个个svg图，
再使用id来标记各个svg图，最后在需要实用的地方使用use标签绑定每个id即可使用svg图
具体的制作svg图可以参考svg图相关文档
2、在这里主要介绍使用插件使用svg
				在Vue项目中，可以通过地址引用SVG图片。首先，将SVG文件保存在项目的某个目录下，比如在src目录下的assets文件夹内。然后，在需要使用SVG图片的组件中，可以通过`<img>`标签来引用SVG图片。在src属性中，指定SVG图片的路径即可。
例如，假设SVG文件保存在src/assets文件夹下，文件名为logo.svg。在组件中使用SVG图片，可以如下代码示例：
```vue
<template>
    <img src="@/assets/logo.svg" alt="Logo">
</template>
在这个例子中，"@/assets/logo.svg"是SVG图片的路径。"@/"是Vue CLI工具中对src目录的别名，使用这个别名可以方便地指向项目的根目录。所以，使用"@/assets/logo.svg"可以准确地指向SVG图片的位置。
通过上述方式，我们可以在Vue项目中通过地址引用SVG图片。需要注意的是，确保SVG文件的路径是正确的，并且项目的webpack配置支持加载SVG文件，否则可能会遇到图片无法正常显示的问题。