#What's the correct way to import svg icons?

6 messages · Page 1 of 1 (latest)

hasty mortar
#

In Nuxt2 I imported them as components but when I tried that now it gives weird hydration bugs.

<template>
 <my-icon />
</template>
<script setup>
import myIcon from 'assets/icons/my-icon.svg?inline'

Also, some of the errors I get:
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core

Unhandled Promise Rejection: InvalidCharacterError: The string contains invalid characters. (I checked the svg and it appears to be syntactically correct though)

Hydration node mismatch:
- Client vnode: – "/_nuxt/assets/icons/icon-doc.svg?inline" (69)
"
- Server rendered DOM:"
<!---->
""
"
"
sharp bolt
#

what if you do const myIcon = import(...)

hasty mortar
#

Also I imported it with

import myIcon from ...
<img :src="myIcon">

and although it works, it seems I can't use css classes from the parent to the child with this method (even though I set currentColor in the <path>'s fill attribute)

hasty mortar
#

More on this: I printed the content of myIcon and it appears to be the path (/_nuxt/assets/icons/my-icon.svg) of the file.
Which is so weird.
So I tried to get the actual thing with require(/_nuxt/assets/icons/my-icon.svg) and require(~/assets/icons/my-icon.svg') none works: Using require I get Cannot find module '~/assets/icons/my-icon.svg?inline'

If I use require('../assets/icons/my-icon.svg') I getUnexpected token '<' (the svg is correct though...)

dusk plank
#

Use nuxt-svgo….much easier