vue 中 怎么引入一个 svg

在 Vue 中引入 SVG 有两种方式，一种是使用 `img` 标签，另一种是使用 `inline-svg`。

1. 使用 `img` 标签引入 SVG

可以像引入普通图片一样，使用 `img` 标签引入 SVG 文件，例如：

<template>
  <div>
    <img src="./assets/logo.svg" alt="Logo">
  </div>
</template>

这种方式的优点是简单易用，缺点是无法对 SVG 进行动态修改。

2. 使用 `inline-svg` 引入 SVG

可以使用 `inline-svg` 库，将 SVG 内容直接嵌入到 Vue 模板中。首先需要安装 `inline-svg` 库：

npm install inline-svg --save

然后在 Vue 组件中引入该库并使用 `inline-svg` 标签引入 SVG 文件，例如：

<template>
  <div>
    <inline-svg src="./assets/logo.svg"></inline-svg>
  </div>
</template>

<script>
import InlineSvg from 'inline-svg';

export default {
  components: {
    InlineSvg
  }
}
</script>

这种方式的优点是可以对 SVG 进行动态修改，例如修改颜色、大小等属性。

相关问题

vue生产环境引入现成svg

在Vue的生产环境中，你可以使用现成的SVG图标库来引入SVG图标。有几种方法可以实现这一目的：

1 使用Vue的插件：你可以使用一些Vue插件来方便地引入SVG图标。例如，`vue-svgicon`是一个常用的插件，它允许你在Vue组件中直接使用SVG图标。你可以通过npm或yarn安装该插件，并按照文档中的说明配置和使用它。

2. 使用外部图标库：如果你想使用现成的SVG图标库，可以考虑使用一些流行的图标库，如Font Awesome、Material Design Icons等。这些库提供了大量的SVG图标供你选择，并且有相应的Vue组件库来方便地使用这些图标。你可以按照它们的文档说明进行安装和使用。

3. 手动引入SVG文件：如果你只需要引入几个简单的SVG图标，也可以手动将SVG文件放在项目中，并在需要的地方使用`<img>`标签或CSS的`background-image`属性来引入。这种方法相对简单，但对于大量的SVG图标可能不太便捷。

以上是几种常见的方法，你可以根据项目的需要选择适合的方式引入现成的SVG图标。

vue中如何动态修改svg图片颜色

在Vue.js中，动态修改SVG图片的颜色通常涉及到JavaScript操作DOM以及数据绑定。以下是一个简单的步骤：

1. 首先，确保你的SVG元素已经通过`v-bind:class`或者`v-bind:style`绑定了一个变量，这个变量将存储当前的颜色值。

<svg :style="{ fill: currentColor }">
   <path class="my-svg-path" v-bind:class="{ active: isActive }"></path>
</svg>

在这里，`currentColor` 和 `isActive` 分别是你可以在Vue组件的数据里控制的颜色属性。

2. 定义Vue组件数据中的颜色变量：

data() {
  return {
    currentColor: '#000', // 初始颜色
    isActive: false, // 判断路径是否活跃，关联颜色变化
  };
},

3. 当需要改变颜色时，在Vue实例的方法或者响应式数据更新的地方更新这些变量：

methods: {
  changeColor(newColor) {
    this.currentColor = newColor;
    // 如果有状态管理，如Vuex，也可以同步到全局状态
  },
}

4. 可能还需要监听某个事件（比如点击或鼠标悬停）来触发颜色的变化：

methods: {
  handleActiveStateChange(isActive) {
    this.isActive = isActive;
  }
},
// 在模板中添加事件监听
<template>
  ...
  <button @click="handleActiveStateChange(true)">激活</button>
  <button @click="handleActiveStateChange(false)">取消</button>
  ...
</template>

现在，当你调用`changeColor`方法或者改变`isActive`的状态时，SVG图片的颜色就会相应地改变。