В vue отдельный файл component.I импортирует файл svg следующим образом: import A from 'a.svg'
И тогда как я могу использовать A в моем компоненте?
Как импортировать SVG файл в компонент Vue?
Ответ 1
На основании предоставленной вами информации вы можете:
- Установите vue-svg-loader
npm install --save-dev vue-svg-loader
- Настройте веб-пакет:
module: {
rules: [
{
test: /\.svg$/,
loader: 'vue-svg-loader', // 'vue-svg' for webpack 1.x
},
],
},
Ответ 2
Если у вас есть контроль над svg файлом, вы можете просто обернуть его в файл vue следующим образом:
a.vue:
<template>
<svg>...</svg>
</template>
Просто import A from 'a.vue'
файл, подобный этому: import A from 'a.vue'
Ответ 3
Если вы используете 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
поскольку вы не получаете исходный вывод. Вы должны использовать raw-loader
Webpack, поэтому убедитесь, что вы получаете исходный вывод:
{
test: /\.svg$/,
use: [
{
loader: 'raw-loader',
query: {
name: 'images/svg/[name].[ext]'
}
},
{
loader: 'svgo-loader',
options: svgoConfig
}
]
}
В приведенном выше примере также используется svgo-loader
так как вы захотите сильно оптимизировать ваши SVG файлы, если вы выполните этот маршрут.
Надеюсь, это поможет вам или кому-либо еще решить, как решить эту проблему, не погрузившись прямо в стороннее решение, чтобы исправить это.
Ответ 4
Мне нравится использовать pug в качестве движка шаблонов (имеет много преимуществ) - если вы это сделаете, вы сможете легко включать файлы, такие как SVG, просто написав:
include ../assets/some-icon.svg
Ответ 5
Сначала вам нужен специальный загрузчик для компонента, который будет содержать 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 не должны содержать тег стиля, поэтому скопируйте и вставьте стиль в стиле 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>
Ответ 6
Вы всегда можете сохранить его как.svg файл в /static/svg/myfile.svg
(используя webpack) и просто использовать его в качестве файла изображения: <img src="/static/svg/myfile.svg">
. Нет необходимости/требуется импорт/загрузчик.