如何将svg文件导入到Vue组件？
如何将svg文件导入到Vue组件？
提问于 2017-06-22 17:33:42
在vue中，单文件组件。导入一个svg文件，如下所示：import A from 'a.svg'，然后我如何在组件中使用A？
回答 10
Stack Overflow用户
发布于 2017-08-05 01:33:54
根据您提供的信息，您可以执行以下操作：
- Install vue-svg-loader
npm install --save-dev vue-svg-loader
- Configure webpack：
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
},
],
},
- 导入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>
Stack Overflow用户
发布于 2019-11-22 07:48:25
我已经在Vue 3中运行了以下代码，不需要和webpack打交道，也不需要安装任何第三方插件。
<template>
<img :src="mySVG" />
</template>
<script>
export default {
name: 'App',
data(){
return {
mySVG: require('./assets/my-svg-file.svg')
}
}
}
</script>SVG注释：我知道在img src中使用SVG时不能修改某些部分，但如果你只是想像使用其他图像一样使用SVG文件，这似乎是一个快速而简单的解决方案。
Stack Overflow用户
发布于 2018-04-14 00:13:18
如果您可以控制svg文件，则可以将其包装在vue文件中，如下所示：
a.vue:
<template>
<svg>...</svg>
</template>之后只需要像这样的文件：import A from 'a.vue'
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44695560
复制相关文章
相似问题
腾讯云开发者
