unplugin/unplugin-vue-components

SVGs as a component

sibbng opened this issue · 3 comments

sibbng commented

Is this library can register SVGs as a component?

For example HomeIcon.svg will be used as <HomeIcon /> in template.

antfu commented

Not sure tho, but maybe you can combine it with https://github.com/visualfanatic/vite-plugin-svg and the following config

ViteComponents({
  extensions: ['vue', 'svg'],
})

Hope to hear good news from you :P

sibbng commented

Hi @antfu

Current beta version of https://github.com/visualfanatic/vite-svg/tree/master/packages/vite-plugin-vue-svg with following config makes possible this use case.

plugins: [
    vue(),
    vueSvgPlugin({defaultExport: 'component'}),
    ViteComponents({
      extensions: ['vue', 'svg'],
    }),
  ],

But I didn't figure out how to configure vite-plugin-components for using it without changing defaultExport setting while that plugin supports importing SVGs as component by adding ?component query.

import MyIcon from './svgs/my-icon.svg?component';

That seems like what you suggested in damianstasik/vite-svg#14

antfu commented

In v0.7.3

  plugins: [
    vue(),
    vueSvgPlugin(),
    ViteComponents({
      extensions: ['vue', 'svg'],
      importPathTransform: path => path.endsWith('.svg') ? `${path}?component` : undefined,
    }),
  ],
  • ❤️2