При попытке использования vue-svg-loader получаю:
[Vue warn]: Invalid Component definition: /img/fire.0f28c25a.svg
Проект сделан с использованием vue cli 3, согласно документации лоадера сделал следующее:
установил npm i -D vue-svg-loader
в файл vue.config.js
добавил запись:
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader');
}
импортирую файл svg и использую его как компонент:
<template>
<Icon />
</template>
import Icon from '@/assets/img/fire.svg'
export default {
name: 'app-icon',
components: {
Icon
}
}
Пересмотрел много постов на эту тему в том числе и этот https://stackoverflow.com/questions/49904540/svg-loading-vue-svg-loader-vue-warn-invalid-component-definition Однако добиться нужного результата та и не вышло
UPD: команда vue inspect показывает такое правило для svg:
/* config.module.rule('svg') */
{
test: /\.(svg)(\?.*)?$/,
use: [
/* config.module.rule('svg').use('vue-svg-loader') */
{
loader: 'vue-svg-loader'
}
]
}
human.svg
, а ругается наfire.svg
– user256824 23 мая '19 в 8:47console.log(Icon)
, после его импорта? – Дмытрык 23 мая '19 в 9:04