Git Product home page Git Product logo

svg-awesome's Introduction

SVG Awesome

This is a simple setup for creating an SVG <symbol> sprite from Font Awesome's SVG font.

Steps

  1. Download Font Awesome from https://fortawesome.github.io/Font-Awesome/.
  2. Replace the contents of svg-awesome.icons.kit with the <glyph>s from Font Awesome's fonts/fontawesome-webfont.svg, starting at the glyph for unicode &#xf000; (~ln. 35).
  3. In svg-awesome.icons.kit:
    • Find <glyph\ unicode="&#x(.*?);"\ (horiz-adv-x="(.*?)" )?d="(.*?)"\ /> and replace with <symbol\ id="<!-- @x\1 -->"\ viewBox="0\ 0\ 1792\ 1792"\ data-unicode="&#x\1;"\ data-horizadvx="\3" preserveAspectRatio="true"><title><!-- @x\1 --></title><path\ d="\4"/></symbol>.
    • Find <glyph\ (.*?)/>\s and replace with '' to remove empty <glyph> definitions.
  4. Replace the contents of svg-awesome.chars.kit with the character variables from Font Awesome's less/variables.less, starting at the first variable that starts with @fa-var- (~ln. 14).
  5. In svg-awesome.chars.kit:
    • Find @fa-var-(.*?):\ "\\(.*?)"; and replace with <!-- @x\2: \1 -->.
  6. If you haven't already, process svg-awesome.kit.
  7. If the file you created isn't an SVG, replace whatever extension it has with .svg.
  8. Enjoy your new SVG Awesome icons.

Requires

  • A text editor or file processor that's capable of regex find and replace.
  • A Kit compiler. The easiest is the original, CodeKit. If you're aware of any others, hit me up and I'll check them out and link them here if they're good.

svg-awesome's People

Stargazers

 avatar

Watchers

Yashi Lanka avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.