"Vue"で使用する

"Vue3"で使う

<script>
import { ref } from 'vue'
import { IconMasterVue, IconMasterType } from 'icon-master'

export default {
	components: {
		IconMasterVue
	}
	setup () {
		return {
			colorRef: ref('FF0000'),
			nameRef: ref<IconMasterType>('Bell')
		}
	}
}
</script>

<template>
	<IconMasterVue :color="colorRef" :name="nameRef" />
</template>

<script>
import { ref } from 'vue'

export default {
    setup () {
        return {
            colorRef: ref('FF0000'), // Red
            nameRef: ref('Bell')
        }
    }
}
</script>

<template>
    ...
    <img :src="`https://icon-master.com/i/${nameRef}/${colorRef}`" />
    // or
    <img :src="`https://icon-master.com/i/Bell/${colorRef}`" />
    // or
    <img :src="`https://icon-master.com/i/${nameRef}/FF0000`" />
    ...
</template>
          

"Vue3(setup)"で使う

<script setup lang='ts'>
import { IconMasterVue } from 'icon-master'
</script>
<template>
  <IconMaster colorRef="ff0000" nameRef="After-the-rain" />
</template>

<script lang="ts" setup>
import { ref } from "vue"

const colorRef = ref('000000') // Black
const nameRef = ref('Bell')
</script>

<template>
    ...
    <img :src="`https://icon-master.com/i/${nameRef}/${colorRef}`" />
    ...
</template>
          

"Vue2"で使う

<script>
export default {
    data () {
        return {
            colorRef: '0000FF', // Blue
            nameRef: ref('Bell')
        }
    }
}
</script>

<template>
    ...
    <img :src="`https://icon-master.com/i/${nameRef}/${colorRef}`" />
    ...
</template>