如何将 svg 文件导入 Vue 组件？

Question

在 vue 单文件组件中。我像这样导入一个 svg 文件： import A from 'a.svg'然后如何在我的组件中使用 A？

Answer 1

根据您提供的信息，您可以做的是：

1. 安装 vue-svg-loader

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

2. 配置 webpack：

 module: { rules: [ { test: /\\.svg$/, loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x }, ], },

3. 导入 svg 并将其用作常规组件：

 <template> <nav id="menu"> <a href="..."> <SomeIcon class="icon" /> Some page </a> </nav> </template> <script> import SomeIcon from './assets/some-icon.svg'; export default { name: 'menu', components: { SomeIcon, }, }; </script>

参考： https : //github.com/visualfanatic/vue-svg-loader

Answer 2

如果您可以控制 svg 文件，则可以将其包装在 vue 文件中，如下所示：

a.vue:

<template>
  <svg>...</svg>
</template>

之后只需要这样的文件： import A from 'a.vue'

Answer 3

我已经在 Vue 3 中使用了以下内容。不需要弄乱 webpack 或安装任何第三方插件。

<template>
  <img :src="mySVG" />
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      mySVG: require('./assets/my-svg-file.svg')
    }
  }
}
</script>

注意：我知道在 img src 中使用 SVG 时您不能修改它的某些部分，但是如果您只是想像使用任何其他图像一样使用 SVG 文件，这似乎是一个快速而简单的解决方案。

Answer 4

如果您使用 Webpack，您可以使用 require 上下文从目录加载 SVG 文件。 请注意，这会将所有 SVG 文件放在您的 Javascript 文件中，但可能会使您的代码膨胀。

作为一个简化的例子，我使用这个svg组件：

data() {
    return {
        svg: ''
    };
},

props: {
    name: {
        type: String,
        required: true
    }
}

created() {
    this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}

模板看起来像这样：

<template>
    <div :class="classes" v-html="svg"></div>
</template>

通常，您不能像这样简单地加载 SVG 文件并期望它们与v-html指令一起使用，因为您没有获得原始输出。 您必须使用 Webpack raw-loader因此请确保获得原始输出：

{
    test: /\.svg$/,
    use: [
        {
            loader: 'raw-loader',
            query: {
                name: 'images/svg/[name].[ext]'
            }
        },
        {
            loader: 'svgo-loader',
            options: svgoConfig
        }
    ]
}

上面的例子也使用了svgo-loader因为如果你这样做，你会想要大量优化你的 SVG 文件。

希望这可以帮助您或其他任何人解决此问题，而无需直接进入第三方解决方案来解决此问题。

Answer 5

我只会使用vue-svg

通过 Vue CLI 3安装：

vue add svg

输入：

<img src="@/assets/logo.svg?data" />

输出：

<img src="data:image/svg+xml;base64,..." />

或者这也是工作......

import LogoImage from "@/assets/logo.svg?inline"

Answer 6

我喜欢使用 pug 作为模板引擎（有很多优点）——如果你这样做，你将能够轻松地包含像 SVG 这样的文件，只需编写：

include ../assets/some-icon.svg

就是这样！ 没有别的事情可做 - 我认为这是一种非常简单方便的方式来包含诸如较小的 svg 之类的东西 - 文件容易包含的代码仍然很干净！

在这里您可以获得更多信息如何将 PugJS 包含到您的 Vue 实例中https://www.npmjs.com/package/vue-cli-plugin-pug

Answer 7

首先，您需要一个特定的组件加载器，该加载器将包含 svg my webpack.base.config.js

module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
      {
        test: /\.vue$/,

        use: [
                    {
            loader: "vue-loader", 
            options: vueLoaderConfig
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
      }
//.. your other rules
}

vues-svg-inline-loader 的文档： https : //www.npmjs.com/package/vue-svg-inline-loader
vue-svg-loader 的文档： https : //www.npmjs.com/package/vue-svg-loader

接下来可以初始化一个vue文件

<template>
<div>

  <img svg-inline class="icon" src='../pathtoyourfile/yoursvgfile.svg' alt="example" />

</div>
</template>

<script>
import axios from 'axios'



export default {
  name: 'logo',
  data () {
  },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#logo{
  width:20%;
}
.rounded-card{
    border-radius:15px;
}
//the style of your svg 
//look for it in your svg file ..
//example
.cls-1,.cls-7{isolation:isolate;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);};stroke-width:2px;}..cls-6{opacity:0.75;mix-blend-mode:multiply;}.cls-7{opacity:0.13;}.cls-8{fill:#ed6a29;}.cls-9{fill:#e2522b;}.cls-10{fill:#ed956e;}.cls-185{fill:#ffc933;}..cls-13{fill:#ffd56e;}.cls-14{fill:#1db4d8;}.cls-15{fill:#0f9fb7;}.cls-16{fill:#3ad4ed;}.cls-17{fill:#25bdde;}.cls-18{fill:#fff;}
//


</style>

您的 svg fils 必须不包含样式标签，因此复制粘贴具有作用域属性的 vue 样式中的样式，以使其特定于该组件
您可以在应用程序的特定位置加载组件并使用它

<template>

<v-app id="app">

    <logo/>
   <router-view/>

</v-app>



</template>

<script>
import logo from './components/logo.vue'

export default {
  name: 'App',
  data(){
    return {
      //your data
    }
  },
  components:{
logo //the name of the component you imported
  },


  }
}
</script>

<style>
#app {

  font-family: 'Hellow', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #070b0f;
  margin-top: 60px;
}

</style>

Answer 8

你也可以使用这样的东西：

<template>
  <img :src="logo"></img>
</template>

<script>
import logo from '../assets/img/logo.svg'

export default {
  data() {
    return {
      logo
    }
  }
}
</script>

这不需要安装外部模块并且开箱即用。

Answer 9

您始终可以将其保存为/static/svg/myfile.svg的 .svg 文件（使用 webpack），并将其用作图像文件： <img src="/static/svg/myfile.svg"> 。 不需要/导入/加载器。

Answer 10

+1 @Stephan-v 的解决方案，但这是 2021 年使用 Webpack 5 稍微修改的方法。

1. 你的 Vue 组件<template/>

选项 A：单个 SVG 文件

<template>
  <svg viewBox="0 0 24 24">
    <use :xlink:href="require('@/assets/icons/icon.svg')"></use>
  </svg>
</template>

选项 B：SVG Sprite（例如 FeatherIcons）

<template>
  <svg viewBox="0 0 24 24">
    <use
      :xlink:href="require('@/assets/icons/sprite.svg') + `#${iconName}`"
    ></use>
  </svg>
</template>

<script>
export default {
  props: {
    // Dynamic property to easily switch out the SVG which will be used
    iconName: {
      type: String,
      default: "star",
    },
  },
};
</script>

2. 你可能需要一个 Webpack 加载器。

注意：如果您使用 Vue 3（如上所述）或 Vite，您可能不需要 Webpack Loader。 如果您使用 Storybook 或 Nuxt，您可能仍然需要它。

$ npm install svgo-loader -D

$ yarn add svgo-loader -D

webpack.config.js （或类似的）

module.exports = {
  mode: "development",
  entry: "./foo.js",
  output: {},
  // ... other config ...
  module: {
    rules: [
      /////////////
      {
        // Webpack 5 SVG loader
        // https://webpack.js.org/guides/asset-modules/
        // https://dev.to/smelukov/webpack-5-asset-modules-2o3h
        test: /\.svg$/,
        type: "asset",
        use: "svgo-loader",
      },
    ],
    /////////////
  },
};

4. 完毕！

Answer 11

我能够通过以下方式内联加载 svgs

<div v-html="svgStringHere"></div>

其中svgStringHere是一个计算属性，它返回一个 svg 作为字符串