Как импортировать SVG файл в компонент Vue?

Ответ 1

На основании предоставленной вами информации вы можете:

1. Установите vue-svg-loader

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

2. Настройте веб-пакет:

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">. Нет необходимости/требуется импорт/загрузчик.