vue引入svg的完整指南

发布时间：2023-05-18

在现代Web应用程序中，图形图像是必不可少的

Vue成为Web开发人员的首选框架之一，因为它提供了一组强大的工具和API，使Web开发人员充分利用SVG的灵活性和可扩展性。Vue应用程序可以通过几种不同的方式引入SVG文件。以下是一个完整的指南，深入研究如何使用Vue将SVG文件添加到您的应用程序中。

一、Vue引入SVG图片

Vue允许我们像引入常规图像一样引入SVG文件。为此，我们可以使用<img>标记并设置SVG文件的路径。但是，Vue会自动将SVG文件转换为指定大小的PNG格式。为了避免这个问题，我们可以使用<object>标记。

<template>
  <div>
    <img :src="require('../assets/icons/my-icon.svg')" alt="" />
    <object
      type="image/svg+xml"
      :data="require('../assets/icons/my-icon.svg')"
    />
  </div>
</template>

使用require()将SVG文件导入，可以让Vue将其作为模块处理，并正确地支持Hot Module Replacement（HMR）机制。

二、Vue引入SVG图片不显示

在将SVG文件作为Vue组件引入时，可能会出现SVG不显示的问题。这是因为SVG文件不是正常的Vue模板组件。解决此问题的方法是使用Vue的组件模板来呈现SVG文件。这可以通过使用<template>标记来完成，如下所示：

<template>
  <div>
    <MyIcon />
  </div>
</template>
<script>
import MyIcon from './icons/MyIcon.vue';
export default {
  components: {
    MyIcon,
  },
};
</script>
<!-- MyIcon.vue -->
<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-1 10.9v-6.9h2v6.9l2.85 1.72-.75 1.23L12 16.46l-2.1 1.29-.75-1.23L11 14.9z"/>
    </svg>
  </div>
</template>

在Vue的代码中引用MyIcon.vue组件，并像通常那样呈现它，使用<MyIcon />标记，这将在应用程序中呈现SVG图标。该图标将被由Vue组件模板呈现，可以以与常规Vue组件相同的方式进行测试和模拟。

三、Vue引入SVG矢量图

Vue的内置vectoreditor组件提供了一种方便的方法，允许您在Vue应用程序中使用矢量图形。

<template>
  <div>
    <v-vector-editor>
      <path
        fill="none"
        stroke="currentColor"
        stroke-miterlimit="10"
        stroke-width="2"
        d="M85.5,72H14.5c-6.617,0-12-5.383-12-12V20c0-6.617,5.383-12,12-12h71c6.617,0,12,5.383,12,12v40
     C97.5,66.617,92.117,72,85.5,72z"
      />
    </v-vector-editor>
  </div>
</template>
<script>
import { VectorEditor } from 'vue-vector-editor';
export default {
  components: {
    'v-vector-editor': VectorEditor,
  },
};
</script>

在这个例子中，我们导入了Vue的vectoreditor组件，将一个SVG的<path>节点导入到Vue的模板中。

四、Vue引入SVG文件

一个常见的需求是将整个SVG文件作为Vue组件引入。Vue为此提供了一种简单的方法：

<template>
  <div>
    <MyIconSvg />
  </div>
</template>
<script>
import { VueSVGIcon } from 'vue-svgicon';
import myIcon from '../assets/icons/my-icon.svg';
Vue.component('MyIconSvg', VueSVGIcon(myIcon));
</script>

该代码段在Vue中注册了MyIconSvg组件，并使用Vue的VueSVGIcon()函数将导入的SVG文件传递给该组件。该函数将返回一个新的Vue组件类，其中包含SVG文件的自定义模板。

五、Vue引入SVG变色

在Vue中，可以通过为SVG文件添加fill和stroke属性来更改SVG文件的默认颜色。要更改SVG文件的颜色，我们可以使用Vue的计算属性，将新的颜色值绑定到SVG文件中。

<template>
  <div>
    <svg :fill="fillColor" :stroke="strokeColor" :viewBox="viewBox">
      <path d="M8 14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-1H8v1z"/>
      <path d="M3 6a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM3 14h18v-3a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3z"/>
    </svg>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fillColor: '#000',
      strokeColor: '#000',
      viewBox: '0 0 30 30',
    };
  },
  computed: {
    invertedFillColor() {
      return '#' + this.fillColor.split('').reverse().join('');
    },
    invertedStrokeColor() {
      return '#' + this.strokeColor.split('').reverse().join('');
    },
  },
};
</script>

在这个例子中，我们给<svg>标签添加了fill和stroke属性，并将Vue的计算属性绑定到这两个属性上。计算属性将fillColor和strokeColor值反转并传递给SVG文件。这将更改SVG文件的填充和线条颜色。

六、Vue引入SVG文件报错，not found

如果你在Vue中引入SVG文件时遇到了not found错误，可能是因为Vue未正确处理SVG文件。在这种情况下，您可以在Vue的Webpack配置中添加额外的模块处理方法，来解决这个问题。

<template>
  <div>
    <MyIcon />
  </div>
</template>
<script>
import MyIcon from '../assets/icons/my-icon.svg';
export default {
  components: {
    MyIcon,
  },
};
</script>
<!-- webpack.config.js -->
<module>
  rules: [
    {
      test: /\.svg$/,
      loader: 'vue-svg-loader',
    },
  ],
</module>

在这个例子中，我们使用Webpack的vue-svg-loader来解决SVG文件加载问题。我们将其添加到Vue的Webpack配置文件中，并使用@引用vue-svg-loader，以确保Webpack能够正确处理SVG文件。

七、Vue引入图标

如果您需要使用某个图标集中的图标，可以使用vue-cli-plugin-svg-icon来将它们导入到您的Vue应用程序中。

$ yarn add vue-cli-plugin-svg-icon -D

安装完成后，您可以使用以下命令生成SVG图标的Vue组件：

$ vue invoke svg-icon

在运行上面的命令后，您将被提示输入图标所在的目录和大小。完成后，插件将自动为您生成Vue组件。

八、Vue引入组件

在Vue应用程序中，您可以使用组件来引入SVG文件。组件是Vue应用程序的基本构建块之一，旨在将可重用的代码块封装为单独的模块。使用组件引入SVG文件，您可以利用Vue的强大的自定义组件功能，将SVG文件作为相应的Vue组件来呈现。

<template>
  <div>
    <MyIcon />
  </div>
</template>
<script>
import MyIcon from '../components/MyIcon.vue';
export default {
  components: {
    MyIcon,
  },
};
</script>
<!-- MyIcon.vue -->
<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path fill="#000" d="M12 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
      <path d="M12.578 19.578L6 13v-2l6.578-6.578a2.828 2.828 0 0 1 4.079 0L18 7.172 12.578 12.6a2.828 2.828 0 0 1-4.079 0zm8.243-6.243A6.986 6.986 0 0 0 19 5.984c-.997-.12-2.031.099-3 .564a7 7 0 1 0 4.821 12.452c.98-.966 1.585-2.29 1.692-3.824-.92.372-1.902.566-2.927.497z"/>
    </svg>
  </div>
</template>

在这个例子中，我们通过Vue的组件功能引入了SVG文件。我们使用<MyIcon />标记在Vue应用程序中呈现组件，并使用<MyIcon.vue>标记定义组件。该组件将SVG文件作为其自定义模

推荐文章