npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@simonbackx/icon-font-loader

v3.1.0

Published

A webpack loader to convert svgs into font icons in CSS

Downloads

2

Readme

icon-font-loader

A webpack loader to convert svgs into font icons in CSS.

CircleCI NPM Version Dependencies NPM Download

Example

Import svg file with a custom property called icon-font by default where you want to use icon font in CSS:

.select:after {
    icon-font: url('../icons/arrow-down.svg');
    color: #666;
}

Then icon-font-loader will generate corresponding css so web browsers can recognize.

.select:after {
    font-family: 'icon-font';
    font-style: normal;
    font-weight: normal;
    ...
    content: '\f106';
    color: #666;
}

After packing all these imports, the loader will create font files (woff2,svg,ttf,woff), and insert a <style> tag into the <head> automatically or emit a CSS file containing @font-face.

@font-face {
    font-family: "icon-font";
    src: url("icon-font.woff2?4063944d4c3fb8fa7bf4c19ad0f59965") format("woff2"),
         url("icon-font.woff?4063944d4c3fb8fa7bf4c19ad0f59965") format("woff"),
         url("icon-font.ttf?4063944d4c3fb8fa7bf4c19ad0f59965") format("truetype"),
         url("icon-font.svg?4063944d4c3fb8fa7bf4c19ad0f59965#icon-font") format("svg");
}

Well, if dataURL option enabled, the result is:

@font-face {
	font-family: "icon-font";
	src:url("data:application/x-font-woff;base64,d09GRgABAAAAAAUkAAsAAAAACQgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAHcAAAC4Ifsmu09TLzIAAAGAAAAAPQAAAFZWTEunY21hcAAAAcAAAADxAAACuqtTRqJnbHlmAAACtAAAAEIAAABwWoXqgmhlYBewAAA=") format("woff");
}

Features

Our loader works in a way different to others:

  • CSS only. You can override existing style like this:
    .select:after {
        icon-font: url('../icons/arrow-down.svg');
        color: #666;
    }
    
    .select.up:after {
        icon-font: url('../icons/arrow-up.svg');
    }
  • Pseudo elements(before or after) only. We treat these icon fonts as some certain characters under one font-family by using their property content.
  • Merge duplicated svgs. We will merge those same svgs into only one to keep slim even they lie in different places in your project.

Install

yarn add @simonbackx/icon-font-loader --dev
npm install --save-dev @simonbackx/icon-font-loader

Config

You must import plugin below in webpack in addition to adding custom properties in CSS.

const IconFontPlugin = require('icon-font-loader').Plugin;

module.exports = {
    ...
    module: {
        rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'icon-font-loader'] }],
    },
    plugins: [new IconFontPlugin()],
};

Loader options

None.

Plugin options

fontName

Name of font family and font files.

  • Type: string
  • Default: 'icon-font'

filename

Output filename format like output.filename of Webpack. The following tokens will be replaced:

  • [ext] the extension of the resource

  • [name] the font name

  • [fontName] the font name, alias of [name]

  • [hash] the hash of svg file (Buffer) (by default it's the hex digest of the md5 hash, and all file will use hash of the svg file)

  • [<hashType>:hash:<digestType>:<length>] optionally one can configure

    • other hashTypes, i. e. sha1, md5, sha256, sha512
    • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
    • and length the length in chars
  • Type: string

  • Default: '[name].[ext]?[hash]'

output

Output path of emitted font and css files, relative to webpack output path. Must be a relative path.

  • Type: string
  • Default: './'

publicPath

Font public path in css url, same as webpack output.publicPath. This option is for overriding it.

  • Type: string
  • Default: ''

localCSSTemplate

Template of virtual property transformed local CSS. It accepts template content instead of a template file path。

If set empty, local CSS won't be generated.

For example, this template generate content inside the following rule:

.icon-1::before, .icon-2::before .icon-3::before {
    font-family: '{{ fontName }}';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

localCSSSelector

Font selector of local CSS defaults to selectors concatenation of all icons in a file.

If set this option, selector will be specified as the value.

  • Type: string
  • Default: ''

For example, if set this option '.my-icon', local CSS will be like this:

.my-icon {
    font-family: '{{ fontName }}';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

property

Custom CSS property name.

  • Type: string
  • Default: 'icon-font'

auto

Whether to insert @font-face css in each chunks automatically, or emit a separated css file.

  • Type: boolean
  • Default: true

dataURL

If true, fonts will be converted into data base64 format embedded in css, instead of emitted as font files.

It's recommanded if there are not many icons because font files need extra requests.

  • Type: boolean
  • Default: false

startCodepoint

Starting codepoint. Defaults to beginning of unicode private area.

  • Type: number
  • Default: 0xF101

fontOptions

Options that are passed directly to svgicons2svgfont.

The descent option is set by default so that for most icons no extra vertical-align style needs to be added. It's a best practice.

  • Type: Object
  • Default:
    {
      fontHeight: 1000,
      descent: 140,
      centerHorizontally: true,
    }

entries

Specify the entry that needs to be automatically inserted. If not specified or an empty array, styles will be inserted for all entries

  • Type: Array
  • Default: undefined

Changelog

See Releases

Contributing

See Contributing Guide

License

MIT