Getting started

Icon font

This article explains how to use, add or remove icons from the icon font in your project.

Using icons

Icon fonts are typically referenced in the <head> section of HTML documents to ensure they are preloaded and styled correctly. In a Next.js application, the icon font is loaded within the root layout.tsx file:

// src/app/layout.tsx
...
import '@/icons/font/cartzillaIcons.css'
...
const cartzillaIcons = localFont({
  src: '../icons/font/cartzillaIcons.woff2',
  preload: true,
  adjustFontFallback: false,
})
...

Applying icons in your JSX code

Icons can be applied within your JSX by using specific classes related to the icon's SVG file name. Here's an example of how to include an icon:

<i className="ci-settings" />

Adding new icons

To expand your icon font library by adding new icons, follow these steps:

  1. Select the .svg icon: Choose the .svg icon you wish to add to the font library.
  2. Format the icon: Ensure the icon is properly formatted. It should be placed within a 24x24px grid, with all strokes outlined and shapes unified. Tools like Adobe Illustrator or other vector graphics software are suitable for this task.
  3. Save the icon: Store the new icon in the src/icons/svg folder. Note, the output icon's CSS class will correspond to the SVG file name.
  4. Generate the icon font: Execute the npm run build-icon-font command. This command runs a script that creates the cartzillaIcons.woff2 font file and generates the corresponding cartzillaIcons.css file from the collection of .svg icons located in the src/icons/svg directory.
  5. Optional configuration changes: If you wish to change the output icon font name, modify the config.fontName property in the scripts/icon-font.mjs file. To change the prefix of the icon CSS class (default is "ci"), adjust the config.cssPrefix property in the same config file. Ensure to update all relevant references in your JSX code if any names are changed.

Removing icons

To remove icons from your project:

  1. Delete the icon(s): Remove the target .svg icon(s) from the src/icons/svg folder.
  2. Regenerate the icon font: Run the npm run build-icon-font command to update the icon font. This removes the deleted icons from the compiled font and the CSS file.

By following these steps, you can effectively manage the icons within your project, ensuring that your web application has a tailored and optimized set of icons at your disposal.

Top