Using pathAlias config

[antoniogiroz]

Hello!

How can I setup the pathAlias for a Vue3 + Vite + TS project?

I downloaded this repo https://github.com/Allenice/svgicon-vite-demo, but I can't configure it in order to use the icon as follows:

<icon data="@icon/vue" original />

<!-- or even -->
<icon name="vue" original />

Any idea?

[Allenice]

Vite plugin for vue3 [@vitejs/plugin-vue] surport config transformAssetUrls now. You can try it. https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options

[rangermeier]

For anyone else trying to get this working: You have to define a list of attributes in your transformAssetUrls. Defining just a single attribute as string is apparently not picked up by Vite.

vite.config.js

export default defineConfig( {
  resolve: {
       alias: {
           '@icons': fileURLToPath(new URL('./src/icons', import.meta.url)),
        }
  },
  plugins: [
    vue({
       template: {
          transformAssetUrls: {
            // svgicon: 'data',  ✗ is not transformed
            svgicon: ['data'], // ✔ works
          }
       }
     })
  ]
})

Configure plugin

import { createApp } from 'vue'
import {VueSvgIconPlugin} from '@yzfe/vue-svgicon'
import App from './App.vue'

createApp(App)
app.use(VueSvgIconPlugin, {tagName: 'svgicon'})

App.vue

<template>
<svgicon data="@icons/info.svg" />
</template>