vuepress

[wirk]

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.

[wirk]

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)
  }