Setting up Fantasticon Library in a React Project

Published in

TechVraksh

4 min readFeb 20, 2024

Fantasticon is a powerful tool that simplifies the process of generating icon fonts for your web projects. In this guide, we’ll walk through the steps to set up Fantasticon in a React project, allowing you to easily manage and utilize custom icons in your applications.

Official Documentation: https://github.com/tancredi/fantasticon#readme

NPM: https://www.npmjs.com/package/fantasticon

Step 1: Install Fantasticon

The first step is to install the Fantasticon library in your React project. Open your terminal and run the following command:

npm install fantasticon

This will add Fantasticon to your project’s dependencies.

Step 2: Update package.json

After installing Fantasticon, navigate to your package.json file and ensure the correct version of Fantasticon is listed under the dependencies section. Additionally, add a new command under the scripts section to make it easy to run Fantasticon.

"scripts": {
  "fantasticon": "fantasticon"
}

Step 3: Prepare Icons

Create a directory in your project to store the source icons. You can add your SVG or PNG icons to this directory.

Step 4: Create fantasticonrc.json

Create a configuration file named fantasticonrc.json in the root of your project. This file will contain the configuration options for Fantasticon.

inputDir: Specifies the directory where the source icons are located. In this example, it is set to “src/assets/icons”. You should replace this path with the actual location of your SVG or PNG icons.
outputDir: Specifies the directory where Fantasticon will generate the icon font files and related assets. In this example, it is set to “src/assets/icon-styles”. Adjust this path based on your project structure.
fontTypes: Defines the types of font files to be generated. The supported options include “woff”, “woff2”, and “eot”. In this case, it is set to create all three types.
assetTypes: Specifies additional asset types to be generated by Fantasticon. Options include “css”, “html”, “json”, “ts”, and “scss”. These files can be useful for integrating the generated font into your project.
fontsUrl: Specifies a URL prefix for the font files. If left empty (“”), the URLs will be generated relative to the CSS file. If you are hosting your fonts on a CDN, you can provide the URL here.
normalize: When set to true, this property instructs Fantasticon to normalize the SVG paths before generating the font. Normalization involves cleaning up and simplifying the SVG paths, ensuring consistent rendering across different browsers.
formatOptions: This object allows you to specify format-specific options for the generated files. In this example, it contains options for the SVG format:

centerHorizontally: If true, it centres the SVG horizontally within the viewBox.
centerVertically: If true, it centers the SVG vertically within the viewBox.
preserveAspectRatio: If true, it preserves the aspect ratio of the original SVG.

Adjust the values according to your project structure and preferences.

Here is a configuration code:

{
    "inputDir": "src/assets/icons",
    "outputDir": "src/assets/icon-styles",
    "fontTypes": ["woff", "woff2", "eot"],
    "assetTypes": ["css", "html", "json", "ts","scss"],
    "fontsUrl": "",
    "normalize": true,
    "formatOptions": {
      "svg": {
        "centerHorizontally": true,
        "centerVertically": true,
        "preserveAspectRatio": true
      }
    }
  }

Step 5: Run Fantasticon

With the configuration in place, run the following command to generate the icon font and related files:

npm run fantasticon

Fantasticon will process the icons in the input directory and generate font files, along with CSS and HTML files, in the specified output directory.

Step 6: Include CSS in your React project

Make sure to include the generated CSS file in your React project. You can achieve this by linking the CSS file in your HTML or importing it into your React components.

// Import the generated CSS file in your React component 
import "./assets/icon-font/custom-icons.css";

Step 7: Utilize Icons in React Components

Fantasticon generates classes for each icon, and you can use these classes directly in your JSX to display the icons.

import React from "react";
import "./App.css";
import "./assets/icon-font/custom-icons.css";

function App() {
  return (
    <div className="App">
      <div>
        Here's the icon
        <hr />
        <i className="icon-icons_facebook"></i>
      </div>
    </div>
  );
}export default App;