How would you go about making this work for multiple sprite sheets?
Hi Soren
Thanks for this great package. I am using it on a project where there are multiple sites, each with their own branding. They will need their own sprite sheet per site. I don't want to have to repeat the data type or doc types per brand, I wondered if you had ever considered how to make it so site A sees one set of sprites and site B sees another set. All within the same backoffice.
One way I can think of, which is a bit of a compromise, but also opens it up to better use is this:
When you create the data type, it would be good to be able to specify multiple sprite sheets and give a name for them. e.g.
Brand A - /assets/a.svg
Brand B - /assets/b.svg
Then when your editor is using the property editor to pick an icon, instead of just having the search bar and then the icons, they could have a dropdown above the search bar to choose which brand sprite sheet to use.
I think that would be really powerful.
Then that got me to thinking, actually that would be really good for this package anyway, not for Brand A and Brand B, but so you can choose between different sprite sheet sources like this:
Font Awesome - /assets/font-awesome-solid.svg
Ico Font - /assets/icofont.svg
IcoMoon - /assets/icomoon.svg
Anyway what do you think to this? Have you considered it before and is there already a way of doing it?
For selecting icons, I now just upload svg's into the media library, and select them using a media picker. I then have some code that takes the path to the svg file, and inlines (using File.ReadAllText()) them onto the page.
With some planning, one could use code like this to use a specific SVG icon:
<svg><use xlink:href=#cart /></svg>
Which would pull content from a svg symbol somewhere on your page. We place code similar to this (with many more icons for our global UI) in the master page of the site.
We build this spritesheet, the thing included on the master page, with a NodeJS package called svg-sprite which we included in our build process.
Just realizing nothing I'm adding to this conversation helps with the Umbraco integration of things. I just wanted to share how we are doing SVGs, at least ones part of our global interface.
Inlining SVGs allows you to control a lot through CSS alone. But there are plenty of use cases to include the <img> tag instead. All the best!
How would you go about making this work for multiple sprite sheets?
Hi Soren
Thanks for this great package. I am using it on a project where there are multiple sites, each with their own branding. They will need their own sprite sheet per site. I don't want to have to repeat the data type or doc types per brand, I wondered if you had ever considered how to make it so site A sees one set of sprites and site B sees another set. All within the same backoffice.
One way I can think of, which is a bit of a compromise, but also opens it up to better use is this:
When you create the data type, it would be good to be able to specify multiple sprite sheets and give a name for them. e.g.
Then when your editor is using the property editor to pick an icon, instead of just having the search bar and then the icons, they could have a dropdown above the search bar to choose which brand sprite sheet to use.
I think that would be really powerful.
Then that got me to thinking, actually that would be really good for this package anyway, not for Brand A and Brand B, but so you can choose between different sprite sheet sources like this:
Anyway what do you think to this? Have you considered it before and is there already a way of doing it?
Thanks
Paul
Hi Paul
Thanks, glad you like it.
I have moved on to use single inlined svg icons, in stead of spreadsheets, so I don't really have any considerations on this package.
It sounds like a good fit, for what you are doing though.
There is an article at CSS-Tricks (A Pretty Good SVG Icon System) explaining the pros of just inlining icons instead of relying on a spreadsheet.
For selecting icons, I now just upload svg's into the media library, and select them using a media picker. I then have some code that takes the path to the svg file, and inlines (using File.ReadAllText()) them onto the page.
With some planning, one could use code like this to use a specific SVG icon:
Which would pull content from a svg symbol somewhere on your page. We place code similar to this (with many more icons for our global UI) in the master page of the site.
We build this spritesheet, the thing included on the master page, with a NodeJS package called svg-sprite which we included in our build process.
Just realizing nothing I'm adding to this conversation helps with the Umbraco integration of things. I just wanted to share how we are doing SVGs, at least ones part of our global interface.
Inlining SVGs allows you to control a lot through CSS alone. But there are plenty of use cases to include the
<img>tag instead. All the best!is working on a reply...