在vue单个文件组件中。我导入一个svg文件，如下所示：
import A from 'a.svg'
然后我如何在我的组件中使用A？
答案 0 :(得分：11)
根据您提供的信息，您可以做的是：
npm install --save-dev vue-svg-loader
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
},
],
},
<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>
答案 1 :(得分：9)
如果您可以控制svg文件，可以将其包装在vue文件中，如下所示：
a.vue:
<template>
<svg>...</svg>
</template>
之后只需要这样的文件：import A from 'a.vue'
答案 2 :(得分：3)
如果使用的是Webpack，则可以使用require上下文从目录中加载SVG文件。请注意，这会将所有SVG文件放入您的Javascript文件中，但是可能会使您的代码肿。
作为简化示例，我正在使用此 post_install do |installer|
installer.pods_project.build_configurations.each do |config|
config.build_settings.delete('CODE_SIGNING_ALLOWED')
config.build_settings.delete('CODE_SIGNING_REQUIRED')
end
end
组件：
svg模板看起来像这样：
data() {
return {
svg: ''
};
},
props: {
name: {
type: String,
required: true
}
}
created() {
this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}
通常，您不能像这样简单地加载SVG文件，并期望它们与<template>
<div :class="classes" v-html="svg"></div>
</template>
指令一起使用，因为您没有得到原始输出。您必须使用Webpack v-html，因此请确保获得原始输出：
raw-loader上面的示例还使用了{
test: /\.svg$/,
use: [
{
loader: 'raw-loader',
query: {
name: 'images/svg/[name].[ext]'
}
},
{
loader: 'svgo-loader',
options: svgoConfig
}
]
}
，因为如果沿着这条路线走，您将需要大量优化SVG文件。
希望这可以帮助您或其他任何人解决问题，而无需直接研究第三方解决方案。
答案 3 :(得分：2)
我只会使用 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"
答案 4 :(得分：1)
你也可以这样使用：
<template>
<img :src="logo"></img>
</template>
<script>
import logo from '../assets/img/logo.svg'
export default {
data() {
return {
logo
}
}
}
</script>
这不需要安装外部模块并且开箱即用。
答案 5 :(得分：0)
我喜欢将pug用作模板引擎（我认为它具有许多优点）-如果这样做，您只需编写以下内容即可轻松包含SVG之类的文件：
include ../assets/some-icon.svg
就是这样！没什么可做的-我认为这是一种包含诸如较小的svg之类的东西的非常简便的方法-文件易于包含的代码仍然很干净！
在这里您可以获得更多信息，如何将PugJS包含在Vue实例https://www.npmjs.com/package/vue-cli-plugin-pug
中答案 6 :(得分：0)
首先，您需要为组件包含一个svg的特定加载器 我的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：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文件必须不包含样式标签，因此请复制并粘贴具有一定范围属性的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>
答案 7 :(得分：0)
我已经在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文件，这似乎是一个快速简便的解决方案。
答案 8 :(得分：0)
对此，我有一个非常基本的解决方案：创建一个svg-array.vue文件，并将所有SVG放入此组件的数据中，然后通过props对其进行调用。
脚本：
props: {
svg: {
type: String,
default: 'back'
}
},
data(){
back: `<svg class='svgIcon-use' width='21' height='21'><path d='M13.402 16.957l6.4786.479L13.402 4l.799.71-5.768 5.768 5.768 5.77z' fill-rule='evenodd' fill="#ccc</path></svg>`,
arrow: `<svg enable-background="new 0 0 100 100" id="Layer_1" version="1.1"viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#111" points="23.1,34.1 51.5,61.7 80,34.1 81.5,35 51.5,64.1 21.5,35 23.1,34.1 "></polygon></svg>`,
},
在模板中
<div v-html="svg"/>
并使用此组件：
<svg-array svg="arrow"/>
答案 9 :(得分：0)
+1 @Stephan-v's solution，但这是 2021 年使用 Webpack 5 稍微修改的方法。
[[0.1 3. 2.4 0.1]
[3.3 1.8 5. 6.3]]
选项 A：单个 SVG 文件
<template/>选项 B：SVG Sprite（例如 FeatherIcons）
<template>
<svg viewBox="0 0 24 24">
<use :xlink:href="require('@/assets/icons/icon.svg')"></use>
</svg>
</template>
注意：如果您使用 Vue 3（如上所述）或 Vite，您可能不需要 Webpack Loader。如果您使用 Storybook 或 Nuxt，您可能仍然需要它。
<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>
$ npm install svgo-loader -D
$ yarn add svgo-loader -D
（或类似）
webpack.config.js答案 10 :(得分：-1)
您始终可以将其另存为{.1vg.svg}文件（使用webpack），而仅将其用作图像文件：/static/svg/myfile.svg。无需/导入/加载程序。