https://jp.vuejs.org/v2/cookbook/editable-svg-icons.html
例えば上記のように、 SVG をただの html の断片であるとして扱うことによって、動的な SVG を vue component として記述することができます。
今このように定義された、例えば以下のような DynamicIcon.vue
ファイルがあるとします。
<template>
<svg xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
viewBox="0 0 18 18"
:aria-labelledby="iconName"
role="presentation"
>
<title
:id="iconName"
lang="en"
>{{ iconName }} icon</title>
</svg>
</template>
<script lang="ts">
import Vue from "vue"
export default Vue.extend({
props: {
iconName: String,
width: String,
height: String
}
})
</script>
このとき、この component に props を与えて描写可能になる svg を Data URI (data:image/svg+xml,....
形式) に変換し、それをテキストして表示するようなページを作成したいです。
<template>
<p>{{ dataUri }}</p>
</template>
<script lang="ts">
import Vue from "vue"
import DynamicIcon from "./DynamicIcon.vue"
export default Vue.extend({
computed: {
dataUri() {
const width = "100"
const height = "100"
const iconName = "my-icon"
// DynamicIcon に 上記 props を与えて描写される svg を data uri に変換したい
}
}
})
</script>
これはどうやったら実現できますでしょうか?
環境
- Nuxt 2.15.8