Pricing Blog

An SVG challenge

  • richardosborne14-1380937829978476614

    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!
    1380937830699892757-user.png
  • richardosborne14-1380938413846433944

    Richard Osborne

    11 days ago

    Btw Nordcraft is awesome, just saying...
  • richardosborne14-1380938671360049222

    Richard Osborne

    11 days ago

    Don't tell @Kotte I said that...
  • richardosborne14-1380940024421421199

    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.
  • richardosborne14-1380940971059187782

    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...
  • lucasg-1380944400355557406

    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
  • lucasg-1380944864845500417

    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
  • andreasmoller-1380947374221824010

    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
  • richardosborne14-1381014916118478958

    Richard Osborne

    11 days ago

    That'll do pig... that'll do
  • Tod-1381014918194794622

    Tod

    11 days ago

    Great job @Richard Osborne! Your contribution to the Nordcraft Community just made you advance to Community Level 1! 🌲
  • richardosborne14-1381015270998413456

    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 πŸ˜…
  • kalaskotte-1381016848291856564

    Kotte

    11 days ago

    haha, i’ve been a Nordcraft fan for many years, even back when i was at Noodl!
  • kalaskotte-1381017224533512375

    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
  • richardosborne14-1381021746123112548

    Richard Osborne

    11 days ago

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