Skip to content

Try converting svg into font easily to make icon-font automatically. The Icon-Font generator Fontagon is available on the Nuxt module.

License

Notifications You must be signed in to change notification settings

kdydesign/nuxt-fontagon

Repository files navigation

🐾 Nuxt-Fontagon

npm version npm downloads Circle CI Codecov Standard JS License

Easy convert SVG from nuxt to icon font. Try converting svg into font easily to make icon-font automatically. The Icon-Font generator Fontagon is available on the Nuxt module.

Info

🔔 This package has been renamed from nuxt-iconfont-generator to nuxt-fontagon

Features

√ Automatically convert svg to font file when building
√ Based on the svg file name, create the CSS and Stylus, SASS, and LESS files as you want

🔔 nuxt-fontagon uses Fontagon functionality as it is. See the Fontagon documentation

Install

  1. Add nuxt-fontagon dependency to your project
# Using npm
npm install --save-dev nuxt-fontagon
# Using yarn
yarn add --dev nuxt-fontagon
  1. Add nuxt-fontagon to the buildModules section of nuxt.config.js
module.exports = {
  buildModules: [
    'nuxt-fontagon'
  ],
  iconFont: {
    /* Fontagon options */
  }
}

⚠️ If you are using nuxt < 2.9.0, use modules property instead and install it as a dependency (no --dev or --save-dev flags).

Options

files

List of SVG files.

🔔 The files option srcDir in Nuxt is root path.

  • Type: Array
  • Default: [srcDir/assets/**/*.svg]
  • required

dist

Directory for generated font files.

🔔 The dist option srcDir in Nuxt is root path.

  • Type: String
  • Default: 'srcDir/assets/font'

fontName

Specify a font name and the default name for the font file.

  • Type: String
  • Default: 'fontagon-icons'

style

stylesheet file generation type.

  • Type: String
  • Default: 'all'
  • options: 'css', 'sass', 'less', 'stylus'

styleTemplate

Specify a custom style template.

The '.hbs' extension is required because the custom template is compiled through handlebars.

If the style is 'all', only one pre-processor template is specified in the styleTemplate, it is merged with the default option and processed.

  • Type: Object
  • Default:
{
  "styleTemplate": {
      "css": "css.hbs",
      "sass": "sass.hbs",
      "less": "less.hbs",
      "stylus": "styl.hbs"
  }
}

classOptions

Additional options for CSS templates, that extends default options.

When 'baseClass' is set, it is specified by the default class name of the stylesheet, or 'classPrefix' as a sub class factor of the stylesheet.

  • Type: Object
  • Default:
{
    "baseClass": "fontagon-icons",
    "classPrefix": "ft"
  }

order

Order of src values in font-face in CSS file.

  • Type: Array
  • Default: ['eot', 'woff2', 'woff', 'ttf', 'svg']

rename

Function that takes path of file and return name of icon.

  • Type: Function
  • Default: basename of file

startCodepoint

Starting codepoint. Defaults to beginning of unicode private area.

  • Type: Number
  • Default: 0xF101

codepoints

Specific codepoints for certain icons.
Icons without codepoints will have codepoints incremented from startCodepoint skipping duplicates.

  • Type: Object
  • Default: {}

formatOptions

Specific per format arbitrary options to pass to the generator

  • Type: object
  • Default:
{
  "svg": {
    "normalize": true,
    "fontHeight": 1000
  }
}

format and matching generator:


writeFiles

It is possible to not create files and get generated fonts in object to write them to files later.
Also results object will have function generateCss([urls]) where urls is an object with future fonts urls.

  • Type: Boolean
  • Default: true

License

MIT License

Copyright (c) Dev.DY

About

Try converting svg into font easily to make icon-font automatically. The Icon-Font generator Fontagon is available on the Nuxt module.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published