SVG Nucleo App and Elements

Elements
1

I enjoy using the Nucleo app for svg:s.
I think it is widely used.

Anyone else here using it?
What are your thoughts?
Any other app you can recommend?

The problem.
When I drag and drop the svg to Elements not every svg i can edit. I use the new edit for svg just released for Elements.
It is the thin icons especially.
I tried to export it first end strip the info and then drag it to elements and that seems to work with editing with elements, but is is one step more then I would like :blush:

TIA

Henrik

svg
svg1356×1120 73.5 KB

2

Could you share an SVG that is not working for you? :blush:

3

This exakt same svg is not working when drag and drop from nucleo but it is working when first exporting and then drag it to elements.

4

I might be lazy but it is all about workflow😊

5

@ben I also discovered that icons from Nucleo are almost impossible to display without extensive tweaking. I have to run them through OSVG and then replace some of the colors by hand with “currentColor” to get them to work.

Here is the code for one of them.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g class="nc-icon-wrapper" fill="#212121"><line x1="3" y1="10" x2="17" y2="10" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" data-color="color-2"></line><polyline points="12 15 17 10 12 5" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline></g></svg>

Here is the code for a version that works after tweaking it.

<svg viewBox="0 0 20 20">
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <path d="M3 10h14"/>
        <path d="M12 15l5-5-5-5"/>
    </g>
</svg>

NOTE: this draws a right arrow.

6

I’ve not used Nucleo for quite a few years, so my knowledge is outdated at best.

However, from reading their site, it looks like you can adjust what is exported - have you tried tweaking these settings?

CleanShot 2025-04-10 at 19.59.16@2x
CleanShot 2025-04-10 at 19.59.16@2x1326×1130 153 KB

7

I have been testing out the various options, but for me some of them do not appear to be working. For instance, I tell it to remove the height and width values, but they are not removed. Same is true of the “Replace inline colors with currentColor”, I had to do this manually.

For now I think I’ll stick with IconJar.

UPDATE: it does do the right thing if you use the Export button, the problems I encountered seemed to be it not respecting the settings when dragging the icon out of the app.

8

sounds like an issue with the Nucleo app, I guess you’ll have to export the icons rather than dragging them directly out of the app.

1 Like
9

I’m now using IconJar - it’s a MUCH nicer Mac app, although you do have to buy/download your own icon sets…

I’ve been using it with Elements and it works great :ok_hand:

CleanShot 2025-04-11 at 9 .02.40@2x
CleanShot 2025-04-11 at 9 .02.40@2x1920×1162 426 KB

CleanShot 2025-04-11 at 9 .05.10@2x
CleanShot 2025-04-11 at 9 .05.10@2x1920×1265 574 KB

10

Yes, I have been testing this out myself and it feels like a great solution.

I just discovered the SVG Cleaner in IconJar, this is very handy as it allows you to tweak any SVG file.

Purchased!

1 Like
11

I’ll have a look at iconjar :grinning_face:
Till then I can use the export in nucleo . It works in elements.

2 Likes