https://github.com/chu121su12/unocss-preset-glyph

https://github.com/chu121su12/unocss-preset-glyph

Last synced: 7 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/chu121su12/unocss-preset-glyph
• Owner: chu121su12
• License: mit
• Created: 2021-12-29T07:00:02.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-08T05:50:42.000Z (over 1 year ago)
• Last Synced: 2024-10-15T03:38:58.002Z (22 days ago)
• Language: TypeScript
• Size: 104 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unocss - unocss-preset-glyph - Embed subset of glyphs from fonts. (Presets)
• awesome-unocss - unocss-preset-glyph - Embed subset of glyphs from fonts. (Presets)

README

        
# unocss-preset-glyph



  

    

  

  

    

  



> Glyph subsetter for UnoCSS

Embed subset of glyphs from fonts.

## Installation

```sh

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:

```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:

```html



  uno css



```


## Utilities

- `g--`

  Where:

  - `` is key in `fonts` config.

  - `` is list of glyph/character to be subsetted.

### Type of `GlyphOptions`

```ts

export interface GlyphOptions {

  /**

   * List of font and its path.

   *

   */

  fonts?: Record

  /**

   * 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`.