Adds example for dynamic SVG without wrapper to README (nuxt-communit…

…y#91) * Adds dynamic SVG without wrapper to README See nuxt-community#72 for context. * fix(README): typo Co-authored-by: Manuel Odelain <[email protected]>
yandongxu · Jul 13, 2022 · 2e8f33b · 2e8f33b
1 parent a91ae80
commit 2e8f33b
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -194,6 +194,24 @@ To dynamically import an SVG, you can use the inline `require()` syntax.
 
 > This example uses `raw-loader`.
 
+To render an SVG without wrapper element and the use of `v-html`, a combination of [dynamic components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components) and `?inline` can be used. See #72 for context.
+
+```html
+<template>
+  <component :is="require(`../assets/${name}.svg?inline`)" />
+</template>
+
+<script>
+  export default {
+    props: {
+      name: { type: String, default: "image" },
+    },
+  };
+</script>
+```
+
+> This example uses `vue-svg-loader`.
+
 ## Caveats
 
 In order for this module to work correctly, the [default `.svg` Nuxt.js webpack rule](https://nuxtjs.org/guide/assets/#webpack) gets replaced with this handler.