An SVG challenge
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 ! 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 . 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 . . . 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π€1That way I can also reuse the SVGs elsewhere where I don 't need them to be buttons , etc 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@Richard Osborne
Don 't tell @Kotte I said that . . . 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