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
}

Known Issues

• Using woff2 font often result in invalid font payload. Please use woff file insted.

License

MIT

Demo

Clone the repo, run pnpm dev.