svg2fontello

presentation

This package convert svg files in fontello files for web

Installation

npm i svg2fontello

yarn add svg2fontello

Create a file .svg2fontellorc at the root of your project with this content :

{
  "svg": "./src/assets/svg",
  "outputFonts": "./src/assets/fonts",
  "importFontsPath": "../assets/fonts/",
  "outputTypes": "./src/types/IconTypes.js",
  "outputStyles": "./src/styles/fontello.css"
}

| Property | description | | --------------- | :-------------------------------------------------------------------- | | svg | the path to your svgs files | | outputFonts | the path where the font files are copied (eot, svg, ttf, woff, woff2) | | importFontsPath | the relative path to your fonts from the css file | | outputTypes | The constant definition file in javascript | | outputStyles | The css file output |

Add Script

In your package.json add this command inside the "scripts" element :

    "scripts": {
        ...other scripts
        "fontello":"svg2fontello"
    }

Use the command line npm run fontello in your terminal to generate all files

Usage

• Import the css file in your web page
• use html element <i class="fontello-[iconName]" /> (replace iconName by the name of your icon)

The icon name is the svg file name converted in kebab-case.

Example :

For "Toggle off.svg" file use <i class="fontello-toggle-off" />

Example in ReactJS :

<i className={IconTypes.TOGGLE_OFF} />