Kevin Powell - Community•3mo ago

Is there an efficient way to handle SVG usage in Svelte?

Instead of this hideous block of code in the picture, is there an easier way to handle using an svg? it really does make it very difficult to see what the hell is going on when I scroll through my code..

    <div class="react">
        <svg
            width="800px"
            height="800px"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            fill="#ff5733"
            stroke="#ff5733"
        >
            <g id="SVGRepo_bgCarrier" stroke-width="0" />

            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />

            <g id="SVGRepo_iconCarrier">
                <title>react</title> <rect width="24" height="24" fill="none" />
                <path
                    d="M12,10.11A1.87...........
                />
            </g>
        </svg>
        <i>React</i>

    <div class="react">
        <svg
            width="800px"
            height="800px"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            fill="#ff5733"
            stroke="#ff5733"
        >
            <g id="SVGRepo_bgCarrier" stroke-width="0" />

            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />

            <g id="SVGRepo_iconCarrier">
                <title>react</title> <rect width="24" height="24" fill="none" />
                <path
                    d="M12,10.11A1.87...........
                />
            </g>
        </svg>
        <i>React</i>

8 Replies

Jochem•3mo ago

I usually just make them components

CDL•3mo ago

makes sense.. import the svg from static/react.svg then use that component in the +page.svelte

Jochem•3mo ago

yup I have a bunch of IconDescription.svelte components (so IconHome, IconSearch, ...) and then just import them where I need them. Keeps the components you work in nice and clean

CDL•3mo ago

for what I'm attempting to do, I assume I can't just throw them all into 1 component, I'd need to have each it's own? SvelteIcon, ReactIcon, HtmlIcon etc..

Jochem•3mo ago

I mean, "need" is a strong word you could make a component that's all the icons together, and just accept that it's going to be a mess of inline svg tags I make them separate because I generally use icons for controls

CDL•3mo ago

I'll attempt to do them separately If I can figure out how to do pathing again LOL

ἔρως•3mo ago

you can take advantage of svg symbols also, your svg is full of useless stuff you have 2 empty groups with HUGE ids

CDL•3mo ago

yea, it's triggering me, but I'm using sveltekit so the SSR part of it is screwing with my just importing my ReactIcon.svelte into my +page.svelte

Gaming

Programming

Is there an efficient way to handle SVG usage in Svelte?