Jump to content
You must now use your email address to sign in [click for more info] ×

Can't add Bootstrap icons as assets?


Recommended Posts

I was trying to have my Botostrap icons available as assets. But I run into problems:

If I drag&drop icons to the canvas in Designer, it keeps the filename as layer name, which is good.

But if I try to add one of those icons as an asset, I get "Assets can not contain embedded documents".

The other way around is to open an icon as a document. This way it can be added as an asset, but has no layer name but "Curves". Same happens if I doubleclick on the "embedded dodument" from above.
Renaming every single one of the currently 1800+ icons is not an option for me.

Is there any way, that I can get all Bootstrap icons into assets while retaining the names without too much effort?
OR did anybody make that already? I googled but did not find anything.

Cheers.

Link to comment
Share on other sites

On Mac, you can drag the file/s directly onto the Assets Panel, but, if there are several elements to the SVG it will name it "Group" if the SVG has a single element it will retain the file name. 

You can add them en-masse so I have selected all of the icons and just dragged them directly from Finder to the Affinity Designer Assets panel, you will see that some of the icons have Group as a name and some have the file name as the name. 

image.png.c3e52f8bdfd8609e3a60fc919f750b1f.png

 

Bootstrap Icons.afassets

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

29 minutes ago, firstdefence said:

On Mac, you can drag the file/s directly onto the Assets Panel, but, if there are several elements to the SVG it will name it "Group" if the SVG has a single element it will retain the file name. 

You can add them en-masse so I have selected all of the icons and just dragged them directly from Finder to the Affinity Designer Assets panel, you will see that some of the icons have Group as a name and some have the file name as the name. 

Bootstrap Icons.afassets 15.67 MB · 0 downloads

Thank you very much, that already helps.

Link to comment
Share on other sites

There are batch flatten tools out there in the ether that can flatten an SVG, basically they are SVG optimisers, I tried Vecta.io as a test and it flattened 2 out of the 5 icons I uploaded. There may be better batch SVG flatteners out there I'll keep looking.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

I took a different approach by writing a notepad++ macro which wraps the svg code in a group whose id is the filename
so
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
<path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</svg>
becomes
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
<g id="0-circle.svg">
<path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</g></svg>
and when imported as assets the filenames show up. Sadly they don't sort very well after drag dropping onto the Asset panel but you can't have everything.
Oh yeah, I also learnt that drag drop doesn't work if Notepad++ is run as admin as is my won't so double click on the exe rather than use the shortcut, then it took a few moments for the 1954 files to appear then a few more for the macro to run but it got there in the end. Macro is attached

BootstrapIconAssets.png

bootstrap-new-icons.zip AssetsAddGroupID.txt

Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

8 hours ago, LostInTranslation said:

Is there any way, that I can get all Bootstrap icons into assets while retaining the names without too much effort?
OR did anybody make that already? I googled but did not find anything.

For bootstrap icons AFAIK there are no ready assets files available yet, but instead for Font Awesome icons. - See therefor ...

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

13 hours ago, David in Яuislip said:

I took a different approach by writing a notepad++ macro which wraps the svg code in a group whose id is the filename
so
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
<path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</svg>
becomes
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
<g id="0-circle.svg">
<path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</g></svg>
and when imported as assets the filenames show up. Sadly they don't sort very well after drag dropping onto the Asset panel but you can't have everything.
Oh yeah, I also learnt that drag drop doesn't work if Notepad++ is run as admin as is my won't so double click on the exe rather than use the shortcut, then it took a few moments for the 1954 files to appear then a few more for the macro to run but it got there in the end. Macro is attached

BootstrapIconAssets.png

bootstrap-new-icons.zip 1.09 MB · 0 downloads AssetsAddGroupID.txt 1.78 kB · 0 downloads

Wow, that is everything I need, thank you.
I had no idea about the macros, but your approach works beautifully.

 

 

19 hours ago, firstdefence said:

On Mac, you can drag the file/s directly onto the Assets Panel, but, if there are several elements to the SVG it will name it "Group" if the SVG has a single element it will retain the file name. 

You can add them en-masse so I have selected all of the icons and just dragged them directly from Finder to the Affinity Designer Assets panel, you will see that some of the icons have Group as a name and some have the file name as the name. 

 

Dragging them directly to the Asets panel works in Windows too, I had no idea.
I only ever added assets via the canvas and never thought of dropping them directly.

 

 

Thanks to the both of you I have all the icons as named asets, how great is that?
The ready assets if you want it:
 

bootstrap_icons_19.zip

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.