css-codepoints

0.1.2 • Public • Published

css-codepoints Build Status Dependency Status DevDependency Status

npm

Generate CSS classes per font glyph.

Example

var cssCodepoints = require('css-codepoints');
 
var css = cssCodepoints({
  fontFamily: 'MySuperFont',
  prefix: 'icon-',
  formats: {
    svg: 'my_super_font.svg',
    ttf: 'my_super_font.ttf'
  },
  icons: {
    foo: 0x1337,
    bar: 0x266e
  }
});
 
fs.writeFileSync('generated.css', css);

generated.css:

@font-face {
    font-family: "MySuperFont";
    src: url("my_super_font.svg") format("svg"),
         url("my_super_font.ttf") format("ttf");
}
 
.icon-foo::before {
    content: "\1337";
    font-family: "MySuperFont";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: bottom;
}
.icon-bar::before {
    content: "\266e";
    font-family: "MySuperFont";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    vertical-align: bottom;
}

Options

Option Required? Type
fontFamily Yes string
formats Yes, ≥1 Object.<type: string, url: string>[]
icons No Object.<name: string, codepoint: {number|string}>[]
prefix No string

options.fontFamily is merely the value of font-face property.

options.formats describes the @font-face's src property.

options.icons describes code points to generate classes for. Each codepoint value should normally be a number, but for the sake of compatibility with JSON configs (which have no notion of a hexadecimal number) it is also allowed to be a string of hex digits.

options.prefix is the common class prefix, empty by default.

License

MIT

Package Sidebar

Install

npm i css-codepoints

Weekly Downloads

1

Version

0.1.2

License

MIT

Last publish

Collaborators

  • eush77