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 2890 karma points MVP 7x 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 713 posts 4571 karma points MVP 6x 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 134 posts 458 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!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies