@coremyslo/nuxt-icon-font
v1.2.0
Published
Nuxt icon font generator
Downloads
743
Readme
@coremyslo/nuxt-icon-font
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
- Add
@coremyslo/nuxt-icon-font
dependency to your project
npx nuxi@latest module add icon-font
- Add
my-module
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
"@coremyslo/nuxt-icon-font"
]
})
- [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()),
// Generates font in memory as "woff" and injects it as base64 to reduce page jump effect, ignores "formats" option
base64: true,
// 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"
}
})