Javascript 如何将 svg 文件导入 Vue 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44695560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I import a svg file to a Vue component?
提问by shangxinbo
In vue single file component.I import a svg file like this:
import A from 'a.svg'And then how can I use A in my component?
在 vue 单文件组件import A from 'a.svg'中。我像这样导入一个 svg 文件：
然后我如何在我的组件中使用 A？
回答by Renato Krcelic
Based on the information you provided, what you can do is:
根据您提供的信息，您可以做的是：
- Install vue-svg-loader
- 安装 vue-svg-loader
npm install --save-dev vue-svg-loader
npm install --save-dev vue-svg-loader
- Configure webpack:
- 配置 webpack：
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
},
],
},- Import the svg and use it as a regular component:
- 导入 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>回答by Moritur
If you have control over the svg file, you can just wrap it in a vue file like so:
如果您可以控制 svg 文件，则可以将其包装在 vue 文件中，如下所示：
a.vue:
a.vue:
<template>
<svg>...</svg>
</template>
Just require the file like this afterwards: import A from 'a.vue'
之后只需要这样的文件： import A from 'a.vue'
回答by Stephan-v
If you are using Webpack you can use the require context to load SVG files from a directory. Be aware that this will put all SVG files within your Javascript files and might bloat your code though.
如果您使用 Webpack，您可以使用 require 上下文从目录加载 SVG 文件。请注意，这会将所有 SVG 文件放在您的 Javascript 文件中，但可能会使您的代码膨胀。
As a simplified example I am using this svgcomponent:
作为一个简化的例子，我正在使用这个svg组件：
data() {
return {
svg: ''
};
},
props: {
name: {
type: String,
required: true
}
}
created() {
this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}
The template simply looks like this:
模板看起来像这样：
<template>
<div :class="classes" v-html="svg"></div>
</template>
Normally you can't simply load SVG files like that and expect them to be used with a v-htmldirective since you are not getting the raw output. You have to use the Webpack raw-loaderso make sure you get the raw output:
通常，您不能像这样简单地加载 SVG 文件并期望它们与v-html指令一起使用，因为您没有获得原始输出。您必须使用 Webpack，raw-loader因此请确保获得原始输出：
{
test: /\.svg$/,
use: [
{
loader: 'raw-loader',
query: {
name: 'images/svg/[name].[ext]'
}
},
{
loader: 'svgo-loader',
options: svgoConfig
}
]
}
The example above also uses the svgo-loadersince you will want to heavily optimize your SVG files if you do down this route.
上面的例子也使用了 ，svgo-loader因为如果你这样做，你会想要大量优化你的 SVG 文件。
Hopefully this help you or anyone else out on how to solve this without diving straight into a third-party solution to fix this.
希望这可以帮助您或其他任何人解决此问题，而无需直接进入第三方解决方案来解决此问题。
回答by Eric Uldall
I've gotten the following to work in Vue 3. Doesn't require messing with webpack or installing any third party plugins.
我已经在 Vue 3 中使用了以下内容。不需要弄乱 webpack 或安装任何第三方插件。
<template>
<img :src="mySVG" />
</template>
<script>
export default {
name: 'App',
data(){
return {
mySVG: require('./assets/my-svg-file.svg')
}
}
}
</script>
Note: I'm aware that you cannot modify certain pieces of the SVG when using it in img src, but if you simply want to use SVG files like you would any other image, this seems to be a quick and easy solution.
注意：我知道在 img src 中使用它时不能修改 SVG 的某些部分，但是如果您只是想像使用任何其他图像一样使用 SVG 文件，这似乎是一个快速而简单的解决方案。
回答by Aleks
First you need a specific loader for the component which will contain the svg my webpack.base.config.js
首先，您需要一个特定的组件加载器，该加载器将包含 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
}
docs of vues-svg-inline-loader : https://www.npmjs.com/package/vue-svg-inline-loader
docs of vue-svg-loader : https://www.npmjs.com/package/vue-svg-loader
vues-svg-inline-loader 的文档：https
://www.npmjs.com/package/vue-svg-inline-loader vue-svg-loader 的文档：https: //www.npmjs.com/package/vue -svg-loader
Next, you can initialise a vue file
接下来可以初始化一个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>
Your svg fils must dont contain style tag so copy paste the style in the vue style with scoped propoerty to keep it specific to this component
you can just load you component in specific place of your app
and use it
您的 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>
回答by lazercaveman
I like to use pug as a template engine (comes with many advantages) - if you do so, you will be able to easily include files like SVG's just by writing:
我喜欢使用 pug 作为模板引擎（有很多优点）——如果你这样做，你将能够轻松地包含像 SVG 这样的文件，只需编写：
include ../assets/some-icon.svgThat's it! there is nothing else to do - I think this is an very easy and convenient way to include stuff like smaller svg's - file's easily included code is still clean!
就是这样！没有别的事情可做 - 我认为这是一种非常简单方便的方式来包含诸如较小的 svg 之类的东西 - 文件容易包含的代码仍然很干净！
Here you can get some more information how to include PugJS into you Vue instance https://www.npmjs.com/package/vue-cli-plugin-pug
在这里您可以获得更多信息如何将 PugJS 包含到您的 Vue 实例中https://www.npmjs.com/package/vue-cli-plugin-pug
回答by Jorge Epu?an
You can always save it as a .svg file in your /static/svg/myfile.svg(using webpack) and just use it as an image file: <img src="/static/svg/myfile.svg">. No require / import / loader needed.
您始终可以将其保存为 .svg 文件/static/svg/myfile.svg（使用 webpack）并将其用作图像文件：<img src="/static/svg/myfile.svg">. 不需要/导入/加载器。
