Closed wirk closed 3 years ago
I found my mistake, I didn't use the registered tag name of the icon component, in my case vue-svg-icon
in the webpack config.
The following setup worked for me:
enhanceApp.js
import {VueSvgIcon} from '@yzfe/vue-svgicon'
export default ({Vue, options, router, siteData}) => {
Vue.component('vue-svg-icon', VueSvgIcon)
}
config.js
chainWebpack: config => {
config.module
.rule('vue-svgicon')
.include.add(svgFilePath)
.end()
.test(/\.svg$/)
.use('svgicon')
.loader('@yzfe/svgicon-loader')
.options({
svgFilePath
})
config.module.rule('svg').exclude.add(svgFilePath).end()
// Recommended configuration transformAssetUrls
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap((opt) => {
opt.transformAssetUrls = opt.transformAssetUrls || {}
opt.transformAssetUrls['vue-svg-icon'] = ['data']
return opt
})
// Recommended configuration alias
config.resolve.alias.set('@icon', svgFilePath)
}
Has anyone been able to get vue-svgicon to work with vuepress? I tried to add the module rules to configureWebpack but the icon data only contains the hashed file names. Any help would be appreciated.