• Brian FryerBrian Fryer, over 6 years ago (edited over 6 years ago )

    I commented on this exact thing in a previous thread...

    I've been using a combination of gulp plugins to generate icon fonts from SVGs. My current workflow:

    I drag and drop an SVG into a folder that gulp is listening to. Gulp starts processing the icon , and runs it through a lodash template. The final products are an SCSS file and relevant font files (e.g. EOT, SVG, TTF, WOFF).

    1 point
    • Mattan IngramMattan Ingram, over 6 years ago

      I do this exact thing, however I am beginning to think of moving away from SVG -> Icon Font and just going straight inline-SVG.

      1 point
      • Brian FryerBrian Fryer, over 6 years ago

        This is definitely ideal. Unfortunately, the app I'm working on needs to support IE8... which doesn't play nice with inline SVGs.

        We've also discovered that IE8 doesn't play nicely with pseudo-elements either. Namely, once a pseudo-element is drawn, it will never be repainted. Thus, hover effects aren't applied to icons from an icon font.

        Our workaround is to use an angular directive that creates normal HTML elements from icons in an icon font. In the meantime, I just use the normal icon font when building prototypes.

        0 points
        • Mattan IngramMattan Ingram, over 6 years ago

          Cool, that makes sense. Thankfully I don't have to support IE8 or really 9, although I do make sure everything works in 9.

          1 point