Return to Answer

export const icons = { Union: [ { d: 'M0.383259 0C0.171591 0 0 0.159488 0 0.356227V6.20405C0 6.40078 0.171591 6.56027 0.383259 6.56027H1.65261C1.86428 6.56027 2.03587 6.40078 2.03587 6.20405V1.78968H8.98206V18.2103H5.69523C5.48356 18.2103 5.31197 18.3698 5.31197 18.5665V19.6438C5.31197 19.8405 5.48356 20 5.69523 20H14.2634C14.475 20 14.6466 19.8405 14.6466 19.6438V18.5665C14.6466 18.3698 14.475 18.2103 14.2634 18.2103H11.0041V1.78968H17.9779V6.20405C17.9779 6.40078 18.1495 6.56027 18.3612 6.56027H19.6167C19.8284 6.56027 20 6.40078 20 6.20405V0.356227C20 0.159488 19.8284 0 19.6167 0H0.383259Z', fill: 'black', fillRule: 'evenodd', clipRule: 'evenodd' } ] } 

<script> import { icons } from 'path/to/icons' defineProps({ icon: String }) <script> <template> <svg ...> <path v-for="(path, key) in icons[icon]" :key="key" v-bind="path" /> </svg> </template> 

<CustomIcon icon="Union" /> 

<script setup> import InlineSvg from 'vue-inline-svg' const foo = new URL('@/assets/foo.svg', import.meta.url).href </script> <template> <inline-svg :src="foo" /> </template> 

export const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`, import.meta.url).href })) ) 

<script setup> import { icons } from './path/to/icons/file' defineProps({ icon: String }) </script> <template> <inline-svg :src="icons[icon]" /> </template> 

Note: vue-inline-svg was actually designed for a different purpose: replacing usages of <img src="some.svg" /> with the actual contents of the svg file.
Why would anyone that? There are many reasons for/against inlining svgs. But some things (e.g: changing color on hover, or using currentColor in fill or stroke attributes) are only possible on actual <svg /> elements and won't work on <img /> tags.

export const icons = { Union: [ { d: 'M0.383259 0C0.171591 0 0 0.159488 0 0.356227V6.20405C0 6.40078 0.171591 6.56027 0.383259 6.56027H1.65261C1.86428 6.56027 2.03587 6.40078 2.03587 6.20405V1.78968H8.98206V18.2103H5.69523C5.48356 18.2103 5.31197 18.3698 5.31197 18.5665V19.6438C5.31197 19.8405 5.48356 20 5.69523 20H14.2634C14.475 20 14.6466 19.8405 14.6466 19.6438V18.5665C14.6466 18.3698 14.475 18.2103 14.2634 18.2103H11.0041V1.78968H17.9779V6.20405C17.9779 6.40078 18.1495 6.56027 18.3612 6.56027H19.6167C19.8284 6.56027 20 6.40078 20 6.20405V0.356227C20 0.159488 19.8284 0 19.6167 0H0.383259Z', fill: 'black', fillRule: 'evenodd', clipRule: 'evenodd' } ] } 

<script setup> import { icons } from 'path/to/icons' defineProps({ icon: String }) </script> <template> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path v-for="(props, key) in icons[icon]" :key="key" v-bind="props" /> </svg> </template> 

<CustomIcon icon="Union" /> 

<script setup> import InlineSvg from 'vue-inline-svg' const foo = new URL('@/assets/foo.svg', import.meta.url).href </script> <template> <inline-svg :src="foo" /> </template> 

export const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`, import.meta.url).href })) ) 

<script setup> import { icons } from './path/to/icons/file' defineProps({ icon: String }) </script> <template> <inline-svg :src="icons[icon]" /> </template> 

Note: vue-inline-svg was designed for a different purpose: replacing usages of <img src="some.svg" /> with the actual contents of the svg file.
Why would anyone that? There are many reasons for/against inlining svgs. But some things (e.g: changing color on hover, or using currentColor in fill or stroke attributes) are only possible on actual <svg /> elements and won't work on <img /> tags.

const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`, import.meta.url).href })) ) 

<script setup> import { foo } from './path/to/icons/file' </script> <template> <inline-svg :src="foo" /> </template> 

Antoher note: I don't recommend/endorse vue-inline-svg package, but I've used it a few times. There might be other similar ones out there. Feel free to research.

export const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`, import.meta.url).href })) ) 

<script setup> import { icons } from './path/to/icons/file' defineProps({ icon: String }) </script> <template> <inline-svg :src="icons[icon]" /> </template> 

Antoher note: I don't endorse vue-inline-svg package and I'm not affiliated with it (but I've used it a few times). There might be other similar ones out there. Feel free to research.

const icons = { [name]: paths } /// or maybe... const icons = { Union: [ { d: 'M0.383259 0C0.171591 0 0 0.159488 0 0.356227V6.20405C0 6.40078 0.171591 6.56027 0.383259 6.56027H1.65261C1.86428 6.56027 2.03587 6.40078 2.03587 6.20405V1.78968H8.98206V18.2103H5.69523C5.48356 18.2103 5.31197 18.3698 5.31197 18.5665V19.6438C5.31197 19.8405 5.48356 20 5.69523 20H14.2634C14.475 20 14.6466 19.8405 14.6466 19.6438V18.5665C14.6466 18.3698 14.475 18.2103 14.2634 18.2103H11.0041V1.78968H17.9779V6.20405C17.9779 6.40078 18.1495 6.56027 18.3612 6.56027H19.6167C19.8284 6.56027 20 6.40078 20 6.20405V0.356227C20 0.159488 19.8284 0 19.6167 0H0.383259Z', fill: 'black', fillRule: 'evenodd', clipRule: 'evenodd' } ] } 

<script> import icons from 'path/to/icons' defineProps({ icon: String }) <script> <template> <svg ...> <path v-for="(path, key) in icons[icon]" :key="key" v-bind="path" /> </svg> </template> 

const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`).href })) ) 

Antoher note: I don't recommend vue-inline-svg package, but I've used it in a few projects. There might be other similar ones out there. Feel free to research.

export const icons = { Union: [ { d: 'M0.383259 0C0.171591 0 0 0.159488 0 0.356227V6.20405C0 6.40078 0.171591 6.56027 0.383259 6.56027H1.65261C1.86428 6.56027 2.03587 6.40078 2.03587 6.20405V1.78968H8.98206V18.2103H5.69523C5.48356 18.2103 5.31197 18.3698 5.31197 18.5665V19.6438C5.31197 19.8405 5.48356 20 5.69523 20H14.2634C14.475 20 14.6466 19.8405 14.6466 19.6438V18.5665C14.6466 18.3698 14.475 18.2103 14.2634 18.2103H11.0041V1.78968H17.9779V6.20405C17.9779 6.40078 18.1495 6.56027 18.3612 6.56027H19.6167C19.8284 6.56027 20 6.40078 20 6.20405V0.356227C20 0.159488 19.8284 0 19.6167 0H0.383259Z', fill: 'black', fillRule: 'evenodd', clipRule: 'evenodd' } ] } 

<script> import { icons } from 'path/to/icons' defineProps({ icon: String }) <script> <template> <svg ...> <path v-for="(path, key) in icons[icon]" :key="key" v-bind="path" /> </svg> </template> 

const icons = Object.assign( {}, ...['foo', 'bar'].map((name) => ({ [name]: new Url(`@/assets/${name}.svg`, import.meta.url).href })) ) 

Antoher note: I don't recommend/endorse vue-inline-svg package, but I've used it a few times. There might be other similar ones out there. Feel free to research.