48.1K

icon-font

Automatically generates fonts and custom properties (variables) from a specified folder containing SVG icons, injecting them into pages with live monitoring.

217 downloads
10 stars
coremyslocoremyslo

@coremyslo/nuxt-icon-font

npm versionnpm downloadsLicenseNuxt

Nuxt icon font generator

Note: This is Nuxt 3 compatible module only.

Features

  • 🕵️‍♂️ Watches specified folder (and sub-folders) with SVG icons and generates fonts on change
  • 💅 Optimizes SVG files via SVGO
  • 🤯 Manual or browserslist based auto-detection of font formats to generate
  • 🏗️ Generates and injects custom properties (variables) with icon codes into pages, where SVG file name is used as a variable name
  • ❤️ Detects and generates the most popular font format as base64 to reduce page jump effect

Usage

<template>  <p>I'm a text with icon!</p></template><style scoped lang="scss">  p {    &:before {      content: var(--icon-font-house);      font-family: "icon-font";    }  }</style>

Setup

  1. Add @coremyslo/nuxt-icon-font dependency to your project
# Using pnpmpnpm add -D @coremyslo/nuxt-icon-font# Using yarnyarn add --dev @coremyslo/nuxt-icon-font# Using npmnpm install --save-dev @coremyslo/nuxt-icon-font
  1. Add my-module to the modules section of nuxt.config.ts
export default defineNuxtConfig({  modules: [    "@coremyslo/nuxt-icon-font"  ]})
  1. Optional Configure for your needs in nuxt.config.ts. Below is the default configuration.
export default defineNuxtConfig({  // ...  iconFont: {    // Font name to be used in "font-family" and custom properties generated prefix "--icon-font-svgiconfilename"    name: "icon-font",    // folder with icons to watch    sourceDirPath: "assets/icon-font",    // target folder for generated fonts in "public" folder    targetDirPath: "icon-font",    // font formats to generate, fallback to ["woff2"] in case browserslist is not used, example for manual configuration: ["svg", "ttf", "woff", "woff2", "eot"] in any order    formats: getFontFormatsList(browserslist()),    // Support of generating the most popular font as base64    base64: false,    // unicode symbol for first icon in iconfont (makes sense to change only if you're not going to use custom properties)    unicode: "0xE900",    // generated custom properties (variables) format. Other options are: "snake", "pascal", "camel", "header", "constant"    case: "kebab"  }})