塊を生成するVueコンポーネント

Blobsアプリで生成される塊をVue3コンポーネントとして使えるようにしました。

---

Vueバージョン

• Vue3

インストール

npmで塊生成パッケージをインストールします。
npm i blobshape

コード

<div>
    <i-blobs :size="6"></i-blobs>
</div>

• 色を付ける場合はcssのcolorプロパティで指定してください。
• 幅と高さはi-blobsの親要素に従います。
• sizeは指定しなくても良いです(任意プロパティ)

---

<template>
    <svg :viewBox="`0 0 ${size} ${size}`">
        <path :d="makePath()" />
    </svg>
</template>
<script>
import { defineComponent,toRefs } from 'vue'
import blobshape from "blobshape";
export default defineComponent({
    name:"i-blobs",
    props:{
        size:{
            type:Number,
            default:100
        },
        growth:{
            type:Number,
            default:6
        },
        edges:{
            type:Number,
            default:6
        }
    },
    setup(props) {
        const {size,growth,edges} = toRefs(props);
        return{
            makePath(){
                const {path} = blobshape({size:size.value,growth:growth.value,edges:edges.value});
                return path
            }
        }
    },
})
</script>
<style scoped>
svg{
    fill:currentColor;
    height: inherit;
    width: inherit;
    max-height: inherit;
    max-width: inherit;
}
</style>

コード説明

コンポーネントで指定したsizeをblobshape生成関数とviewBoxに渡します。blobshapeリポジトリのサンプルコードではviewBoxを特に指定していませんが、指定しないと描画外に塊が生成されることがあります。
svgのスタイルはscopedを指定することでi-blobsコンポーネント内だけに限定し、fillプロパティをcurrentColorにすることでcolorプロパティの色で塗られるようにしています。