矢量圖標

單色
主題色
固定彩色
加載失敗

    <script>
        import "@/lib/SvgIcon"
    </script>
    <section>
        <section>
            <span>單色</span>
            <na-svg-icon src={left.src} title="left"></na-svg-icon>
            <na-svg-icon src={right.src} title="right"></na-svg-icon>
        </section>
        <section>
            <span>主題色</span>
            <na-svg-icon src={clover.src} title="clover"></na-svg-icon>
            <na-svg-icon src={lit.src} title="lit"></na-svg-icon>
        </section>
        <section>
            <span>固定彩色</span>
            <na-svg-icon
                src={import.meta.env.BASE_URL + "clover.svg"}
                title="clover"
            >
            </na-svg-icon>
            <na-svg-icon
                src={import.meta.env.BASE_URL + "tiktok.svg"}
                title="tiktok"
            >
            </na-svg-icon>
        </section>
        <section>
            <span>加載失敗</span>
            <na-svg-icon src="404" title="404"></na-svg-icon>
        </section>
    </section>
    <script>
        async function onload() {
            for (const element of document.querySelectorAll("na-svg-icon")) {
                element.addEventListener("load-error", e => {
                    // e.preventDefault() 阻止顯示缺省圖片
                    console.warn("load-error", (e as CustomEvent<Error>).detail)
                })
            }
        }

        onload()
    </script>
    <style>
        na-svg-icon {
            width: 8em;
            height: 8em;
        }
    </style>