All topics

An SVG challenge

Richard Osborne

11 days ago

Howdy y'all. I'm diving deep into the Nordcraft Newbie rabbit hole and I've come up against a challenge. I want to make a component 'clickable icon' which is a round bordered div with an SVG inside.

I love the way you can just copy paste SVGs into Nordcraft. What I can't wrap my head around is a way I could still have that ease of pasting but in a component attribute. Right now my test SVG (shown in the thread image) has two path elements. Depending on the SVG I want to use in the future, could be one path or more. I'm thinking the attribute should be an array of path values maybe? Maybe then paste in an SVG arbitrarily to the editor just to get the path values and add them to the component attribute as an array of objects? Have one path element inside the component and tell it to repeat the number of times there's objects in the input attribute array? Or am I massively overcomplicating my life as usual?

Thanks in advance for any tips!
Richard Osborne

11 days ago

Btw Nordcraft is awesome, just saying...
Richard Osborne

11 days ago

Don't tell @Kotte I said that...
Richard Osborne

11 days ago

Gosh dang the 'path' element that repeats worked. I can enter svg paths as an array in attributes. It's a bit of a pain to have to paste the svg, then copy out the paths and create the array for each new button, but I'm sure there's probably a way to make this easier... I'm guessing a clever person would just create one component for each svg icon, like instead of 'clickableIcon' you'd use 'clickableIconUser' / 'clickableIconClose' or whatever.
Richard Osborne

11 days ago

My gut is telling me I should put each SVG array of paths I want to use in a sort of 'master array' somewhere in the app that I can access from anywhere and extract the array item I want, so then I have the one clickableIcon component and when placed I choose the icon I want in there each time
but I'm not sure that's possible...
Lucas G

11 days ago

I don't think there is a "right" way to go about this one. Personally, I like having SVGs be their own component (ie., icon-user) and then have a button or clickableIcon button component with a slot then whenever I want to use it, I use the clickableIcon and slot in whichever icon I need
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
🤔1
That way I can also reuse the SVGs elsewhere where I don't need them to be buttons, etc
Lucas G

11 days ago

This approach also avoids the component needing to load however many SVGs there are in it if I were to store all of them in one place. I know that SVGs aren't "heavy" resources but I prefer it
Andreas Møller

11 days ago

Check out the docs for slots I think that is what you are looking for

https://docs.nordcraft.com/components/compositions#slots
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
🙏1
@Andreas Møller
Check out the docs for slots I think that is what you are looking for

https://docs.nordcraft.com/components/compositions#slots
Richard Osborne

11 days ago

That'll do pig... that'll do
Tod

11 days ago

Great job @Richard Osborne! Your contribution to the Nordcraft Community just made you advance to Community Level 1! 🌲
@Lucas G
I don't think there is a "right" way to go about this one. Personally, I like having SVGs be their own component (ie., icon-user) and then have a button or clickableIcon button component with a slot then whenever I want to use it, I use the clickableIcon and slot in whichever icon I need
Richard Osborne

11 days ago

I think I'd be less anxious about doing this if there was a way of organising components into folders. It sets off my OCD seeing a huge list of icon components mixed up with all the other app components 😅
@Richard Osborne
Don't tell @Kotte I said that...
Kotte

11 days ago

haha, i’ve been a Nordcraft fan for many years, even back when i was at Noodl!
Kotte

11 days ago

(well, toddle, to be exact, but who’s counting?)
it’s really solid
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
❤️1
@Kotte
it’s really solid
Richard Osborne

11 days ago

It seems much more of a Kotte type platform, very neat and clean

An SVG challenge

Richard Osborne

Richard Osborne

Richard Osborne

Richard Osborne

Richard Osborne

Lucas G

Lucas G

Andreas Møller

Richard Osborne

Tod

Richard Osborne

Kotte

Kotte

Richard Osborne