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中使用SVG文件时，可以使用vue-svg-loader来加载SVG文件。

以下是引入.svg文件并展示在页面中的示例：

1. 首先，需要安装 `vue-svg-loader` 和 `svg-inline-loader`。

npm install vue-svg-loader svg-inline-loader --save-dev

2. 在`vue.config.js`中添加如下配置：

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

3. 在Vue组件中使用`<svg-icon>`标签，并在`src`属性中指定SVG文件路径。

<template>
  <div>
    <svg-icon src="./assets/icons/icon.svg"></svg-icon>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
/* 样式 */
</style>

4. 在项目中创建`/src/components/SvgIcon.vue`文件，作为SVG图标的组件。

<template>
  <div
    v-if="loaded"
    class="svg-icon"
    v-html="icon"
    @click="$emit('click')"
  ></div>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loaded: false,
      icon: ''
    }
  },
  mounted() {
    this.loadIcon()
  },
  methods: {
    loadIcon() {
      import(`!!vue-svg-loader!svg-inline-loader!${this.src}`)
        .then(icon => {
          this.loaded = true
          this.icon = icon.default
        })
        .catch(() => {
          console.error(`Error loading SVG icon: ${this.src}`)
        })
    }
  }
}
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}
</style>

通过以上步骤，就可以成功引入SVG文件并展示在页面中了。