使用Vue引入SVG图片

发布时间：2023-05-18

一、使用Vue引入SVG图片

在Vue中，我们可以使用<img>标签或background属性来引入一个SVG图片。从Vue Loader 14.0.0开始，Vue Loader支持用import语句引入SVG文件。这个语法需要在项目中安装svg-sprite-loader。 首先需要安装svg-sprite-loader：

npm install svg-sprite-loader --save-dev

接着，新建一个Vue组件，命名为MyComponent.vue：

<template>
  <img src="./assets/logo.svg" alt="logo">
</template>
<script>
import logo from './assets/logo.svg';
export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

可以看到，在这个Vue组件中，我们使用import语句引入了"./assets/logo.svg"文件，并将其设置为了数据data中的一个属性“logo”。在模板template中，我们直接使用了<img>标签来展示logo图片。这样就完成了一个使用Vue引入SVG图片的场景。

二、使用Vuerequire引入SVG图片

在Vue中使用vuerequire引入SVG图片要实现的功能和使用Vue引入SVG图片是一样的，只是实现方式不同。Vuerequire是一个webpack-loader，它的作用是把一个SVG文件转化成一个Vue组件。使用这个组件可以轻松地在一个Vue应用中使用SVG图标。 首先需要在项目中安装vuerequire-loader：

npm install vuerequire-loader --save-dev

接着，新建一个SVG文件：logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path d="M59.304,153.923c0-26.711,21.603-48.315,48.315-48.315 c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z M283.056,900.959l308.623-352.479l-308.623-352.479 C265.527,159.064,256,170.504,256,187.346v738.309 C256,929.496,265.526,940.936,283.056,900.959z M947.373,153.923 c0-26.711,21.603-48.315,48.315-48.315c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z"/>
</svg>

然后，在Vue组件中通过import引入logo.svg文件，然后在template中使用<svg-icon>组件来使用这个logo图标：

<template>
  <svg-icon :icon="logo"/>
</template>
<script>
import logo from './logo.svg';
export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

在这个Vue组件中，我们使用import语句引入了"./logo.svg"文件，并将其设置为了数据data中的一个属性“logo”。在模板template中，我们使用了<svg-icon>组件并通过:icon属性来指定了logo图标。这样就完成了一个使用vuerequire引入SVG图片的场景。

三、一些注意事项

在使用Vue引入SVG图片或者使用vuerequire引入SVG图片时，需要注意以下几点：

  1. 确认SVG图片是可以在浏览器中正确显示的。一些SVG图片可能存在不准确的标记或不完整的结构，这会导致浏览器无法正确地渲染图片的一部分或全部内容。
  2. 确保SVG图片的属性设置正确。在使用SVG图片时，需要注意一些重要的属性设置，比如viewBox、preserveAspectRatio、width和height等。这些属性设置会影响图片的渲染效果和展示方式。
  3. 使用import语句时，需要导入.svg文件，而不是引用.js或其他不合适的文件。如果导入了错误的文件，可能会导致应用程序无法编译或启动。
  4. 在template中使用<img>标签或background属性时，需要使用require语句。
  5. 使用Vue中的动态组件时，需要使用is属性来指定要引用的组件名称。
推荐文章