Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Paul Seal 524 posts 2889 karma points MVP 6x c-trib
    Jun 05, 2019 @ 08:40
    Paul Seal
    0

    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?

    Thanks

    Paul

  • Søren Kottal 702 posts 4497 karma points MVP 5x c-trib
    Jun 05, 2019 @ 12:13
    Søren Kottal
    1

    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.

  • Mark Drake 133 posts 457 karma points c-trib
    Jun 05, 2019 @ 15:06
    Mark Drake
    1

    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.

    <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
     <symbol id=cart viewBox="0 0 600 600">
         <path d="M-556.8 508.3zm1101.1-30h.1c27 0 48.8 21.9 48.8 48.8 0 27-21.9 48.8-48.8 48.8-27 0-48.8-21.9-48.8-48.8 0-13.2 5.3-25.2 13.8-34H271.1c8.3 8.7 13.4 20.5 13.4 33.5 0 26.9-21.8 48.6-48.6 48.6s-48.6-21.8-48.6-48.6c0-25.5 19.7-46.5 44.9-48.5l-12.9-40.2L104.4 82.6H6.8V24h140.6l10.4 33.4 27.2 83.8h407.8l-41.4 235H260.7l19.5 56.3v2.1h263.9v43.8l.2-.1z" />
     </symbol>
    </svg>
    

    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!

Please Sign in or register to post replies

Write your reply to:

Draft