Toman.vue

<template>
    <div class="v-toman">
        <div class="vt-amount">{{ formatNumber(value, ",") }}</div>
        <div class="vt-icon icon">
            <svg
                viewBox="0 0 24 24"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M2.4,11.6c0.4,0.2,0.8,0.4,1.3,0.6c-0.1,0.2-0.2,0.4-0.2,0.6c-0.2,0.5-0.3,0.9-0.3,1.4c0,0.8,0.3,1.3,1.1,1.5
		c0.8,0.2,1.5,0.2,2.3-0.2C6.7,15.3,7,15.2,7.2,15c0.3-0.4,0.4-0.7,0.3-1.2c-0.2-0.7-0.4-1.4-0.7-2.1c0-0.1,0-0.2,0-0.3
		c0.3-0.6,0.6-1.2,0.9-1.8c0-0.1,0.1-0.1,0.1-0.1c0.7-0.2,1.4-0.5,2.1-0.7c0.2-0.1,0.4-0.1,0.6-0.1C11,8.7,11.4,9,11.4,9.5
		c0.1,0.4,0.1,0.8,0.1,1.2c0,1.1,0.1,2.1,0.1,3.2c0,0.2,0,0.3,0.1,0.5c0.1,0.2,0.2,0.4,0.4,0.4c0.2,0,0.5,0,0.8,0
		c0.4,0,0.6-0.3,0.9-0.6c0.1-0.2,0.3-0.4,0.4-0.6c0.3-0.4,0.5-0.9,0.9-1.2c0.2-0.3,0.5-0.5,0.9-0.5c0.6-0.1,1.1,0.1,1.5,0.5
		c0.4,0.3,0.6,0.8,0.8,1.2c0.2,0.4,0.3,0.8,0.4,1.3c0.4,0,0.9,0,1.3-0.1c0.2,0,0.5-0.1,0.8-0.1c0.2-0.1,0.3-0.1,0.2-0.4
		c-0.1-0.6-0.3-1.1-0.5-1.7c0,0,0-0.1,0-0.1c0.5-0.2,0.9-0.5,1.4-0.8c0,0.1,0,0.1,0.1,0.1c0.3,0.7,0.5,1.5,0.6,2.3
		c0,0.6,0,1.1-0.3,1.6c-0.3,0.5-0.8,0.8-1.3,0.9c-0.5,0.1-1,0.2-1.5,0.2c-0.2,0-0.5,0-0.7,0c-0.1,0.2-0.1,0.3-0.2,0.5
		c-0.4,0.8-1,1.4-1.8,1.7c-0.6,0.3-1.3,0.4-1.9,0.5c-0.2,0-0.4,0-0.6,0c0,0-0.1,0-0.1-0.1c-0.2-0.5-0.4-1.1-0.6-1.6c0,0,0,0,0-0.1
		c0.2,0,0.4,0,0.6,0c0.7,0,1.4-0.1,2.1-0.3c0.4-0.1,0.8-0.3,1-0.6c-0.1,0-0.2,0-0.4,0c-0.4,0-0.8-0.1-1.2-0.2
		c-0.4-0.1-0.7-0.3-1-0.6c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.3-0.8,0.5-1.3,0.5c-0.4,0-0.8,0-1.2-0.1c-0.8-0.2-1.2-0.6-1.4-1.4
		c-0.1-0.5-0.2-1-0.2-1.5c0-0.8,0-1.6-0.1-2.4c0-0.3-0.1-0.6-0.1-1c-0.6,0.2-1.2,0.4-1.7,0.6c0.1,0.1,0.1,0.3,0.1,0.4
		c0.2,0.7,0.4,1.5,0.5,2.2c0.2,2-1.1,3.7-3,4.1c-1,0.2-2,0-2.8-0.5c-0.8-0.5-1.2-1.2-1.4-2.2c-0.1-0.9,0.1-1.8,0.4-2.6
		C2.1,12.2,2.2,11.9,2.4,11.6z M17,14.7c0.1-0.3-0.1-0.7-0.3-0.9c-0.3-0.3-0.7-0.3-1,0c-0.2,0.2-0.3,0.4-0.4,0.6
		C15.9,14.7,16.4,14.7,17,14.7z"
                />
                <path
                    d="M21.8,10.8c-1.3,0-2.6,0.1-3.9,0.4c-0.1-0.5-0.2-1-0.3-1.6c1.5-0.4,3-0.6,4.5-0.5C22,9.7,21.9,10.2,21.8,10.8z"
                />
                <path
                    d="M4,10.3c0.3-0.3,0.7-0.7,1.1-1.1c0.3,0.3,0.7,0.7,1.1,1.1c-0.4,0.3-0.7,0.7-1.1,1.1C4.7,11,4.4,10.6,4,10.3z"
                />
            </svg>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { formatNumber } from "@termehui/utils";
defineProps({ value: Number });
</script>