У меня есть проект, в котором используется vue -svg-loader и шрифт awesome 5. Моя проблема в том, что после добавления vue -svg-loader я не вижу никаких значков FA. Вместо них получаются пустые квадраты. Но когда я комментирую правило в vue .config. js все в порядке. Вот мой vue .config. js:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
}
После vue проверки> вывода. js:
{
test: /\.(svg)(\?.*)?$/,
use: [
/* config.module.rule('svg').use('babel-loader') */
{
loader: 'babel-loader'
},
/* config.module.rule('svg').use('vue-svg-loader') */
{
loader: 'vue-svg-loader'
}
]
},
/* config.module.rule('media') */
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
/* config.module.rule('media').use('url-loader') */
{
loader: 'C:\\pet_projects\\hello-world\\node_modules\\url-loader\\dist\\cjs.js',
options: {
limit: 4096,
fallback: {
loader: 'C:\\pet_projects\\hello-world\\node_modules\\file-loader\\dist\\cjs.js',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}
}
}
]
},
/* config.module.rule('fonts') */
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
use: [
/* config.module.rule('fonts').use('url-loader') */
{
loader: 'C:\\pet_projects\\hello-world\\node_modules\\url-loader\\dist\\cjs.js',
options: {
limit: 4096,
fallback: {
loader: 'C:\\pet_projects\\hello-world\\node_modules\\file-loader\\dist\\cjs.js',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
}
}
]
},
Мой шаблон:
<v-btn>
<v-icon>fas fa-code</v-icon>
</v-btn>