`template`に[[SVG]]ファイルの`svg`タグを突っこんで、変更したいところだけPropertyを渡せばよい。
```html:Mimizou.vue
<script lang="ts" setup>
const props = defineProps({
width: String,
height: String,
color: String,
})
</script>
<template>
<svg
:width="props.width"
:height="props.height"
id="mimizou"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 ? ?"
xml:space="preserve"
>
<title>mimizou</title>
<path
id="mimizou"
:fill="props.color"
d="???"
/>
</svg>
</template>
```
`?`の部分は画像のパスだったりサイズだったりを渡す。使い方は[[Vue]]と同じ。
```html
<mimizou width="40" height="40" color="red" />
```
## 参考
- [編集可能な SVG アイコンシステム — Vue\.js](https://jp.vuejs.org/v2/cookbook/editable-svg-icons.html)
---
**💽Change log**
- #2021/11/11 作成