Unocss-preset-glyph NPM

unocss-preset-glyph

Glyph subsetter for UnoCSS

Embed subset of glyphs from fonts.

Installation

npm i unocss-preset-glyph unocss --save-dev # with npm
yarn add unocss-preset-glyph unocss -D # with yarn
pnpm add unocss-preset-glyph unocss -D # with pnpm

Usage

js:

// unocss.config.js
import { presetUno, defineConfig } from 'unocss'
import { presetGlyph } from 'unocss-preset-glyph'

export default defineConfig({
  presets: [
    presetGlyph({
      fonts: {
        'fontname': 'path/to/font.woff',
        alias: 'path/to/original-name.otf',
      },
    }),
    // presetUno(),
  ],
})

html:

<div class="g-fontname-uno g-alias-cs">
  uno css
</div>

Utilities

g-<font item>-<glyphs>
Where:
- <font item> is key in fonts config.
- <glyphs> is list of glyph/character to be subsetted.

Type of `GlyphOptions`

export interface GlyphOptions {
  /**
   * List of font and its path.
   *
   */
  fonts?: Record<string, string>
  /**
   * Class prefix for matching glyph rules.
   *
   * @default `g-`
   */
  prefix?: string
  /**
   * Rule layer
   *
   * @default 'glyphs'
   */
  layer?: string
  /**
   * Prefix for font-family declaration.
   *
   * @default `un-`
   */
  familyPrefix?: string
}