Vue 项目中使用相对路径引入 SVG 图片：最佳实践指南

本文将详细介绍如何在 Vue 项目中通过文件引入 SVG 图片，并使用相对路径实现图片的灵活引用。以 SVG 文件名为 'svgmap.svg'，位于父目录的 'svgmap' 文件夹为例，给出详细步骤和代码示例。

步骤

**创建 SVG 文件夹：** 在项目中新建一个文件夹，用于存放 SVG 图片。例如，可以将 SVG 图片存放到 `src/assets/svgmap/svgmap.svg` 路径下。
**引入 SVGIcon 组件：** 在 Vue 组件中，引入 `SvgIcon` 组件，该组件用于处理 SVG 图片的渲染。
**使用 SVG 图片：** 在 Vue 组件的模板中，使用 `svg-icon` 标签引用 SVG 图片，并传入 `name` 属性，该属性对应 SVG 图片的名称。
**实现 SvgIcon 组件：** 在 `SvgIcon` 组件中，使用 `computed` 属性计算 SVG 图片的路径和样式类名，并通过 `use` 标签渲染 SVG 图片。
**添加样式：** 在样式文件中添加样式，定义 SVG 图片的尺寸、颜色等属性。

代码示例

1. Vue 组件

<template>
  <div>
    <svg-icon name='svgmap'></svg-icon>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon.vue' // 引入 SvgIcon 组件

export default {
  name: 'demo',
  components: {
    SvgIcon // 注册 SvgIcon 组件
  }
}
</script>

2. SvgIcon 组件

<template>
  <svg :class='svgClass' aria-hidden='true'>
    <use :xlink:href='iconName'></use>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    name: {
      type: String,
      required: true // 必填项
    }
  },
  computed: {
    iconName () {
      return '../assets/svgmap/svgmap.svg#${this.name}' // 使用相对路径引入 SVG 图片
    },
    svgClass () {
      return 'svg-icon-' + this.name
    }
  }
}
</script>

3. 样式文件

/* 引入 SVG 图片 */
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/* 定义 SVG 图片尺寸 */
.svg-icon svg {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}

总结

本文详细介绍了如何在 Vue 项目中通过文件引入 SVG 图片，并使用相对路径实现图片的灵活引用。通过 SvgIcon 组件和样式定义，您可以轻松地将 SVG 图片应用到您的 Vue 项目中。