search

ginetta / skeleton

a static site generator for web frontend projects
22 stars 4 forks source link

Icon sprites #143

Closed lucalanca closed 7 years ago

lucalanca commented 7 years ago

please merge #142 first.

meodai commented 7 years ago

Looks awesome, especially the SVG sprite part

lejoe commented 7 years ago

Additionally there's an inline option for the symbols mode: https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#user-content-defs--symbol-mode

Is that something we want? I think it removes one node

lejoe commented 7 years ago

@lucalanca thanks for the fixes. Now there's only https://github.com/ginetta/skeleton/pull/143#discussion_r107722869 and https://github.com/ginetta/skeleton/pull/143#issuecomment-288787993 left

lucalanca commented 7 years ago

@lejoe Added the inline option (and also included the sprite on the default template) so it is included 👍 This is nice as an extra http request is needed.

lucalanca commented 7 years ago

@brunnolou as a work-around to add a class to the svg, we can do one of two things:

  1. Add the class to the original icon.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="js-icon">
<title>Forward</title>
<desc>An arrow pointing right</desc>
<path d="M5 22.38L15.11 12 5 1.62 6.56 0 18.2 12 6.56 24"/>
</svg>

    For some reason, this gets transformed to class="ajs-icon".

  2. Add a class to the icon wrapper:

    .js-icon
+icon(...)