ligature-to-html-entity
This project was created to avoid refactoring the usage of ligatures with material-design-icons, in a React application where older browser support is required.
So here is a simple Webpack loader that will target your icons and replace them with the equivalent HTML entities provided by google's Material Design Icons.
By using the material-design-icons package and referencing the codepoints file, we can map all ligature instances to HTML entity values.
This is v2 with Webpack@4 support.
For Webpack@2 support please use v1.
<i className="material-icons">face</i> --> <i className="material-icons"></i>
Usage
Install as a dev dependency via npm.
$ npm install ligature-to-html-entity@2 --save-dev
When inserting this loader into your Webpack configuration, make sure to place it last in the list (as below).
// webpack.config.js rules: test: /\.js$/<!-- ligature-to-html-entity --> exclude: path use: loader: 'babel-loader' options: "presets": "@babel/preset-env" "@babel/preset-react" loader: 'ligature-to-html-entity' // <--- insert here, last loader in the list ...
Default usage
This is the result if run with no query params, targeting the typical material-icons element markup.
face <!-- becomes --> 
Custom query
You can add the tag and attr as a query params. In this example we are setting the tag to md-icon and omitting the attribute by using a minus char.
# 'ligature-to-html-entity?tag=md-icon&-attr face --> 
Options
Query | Default value | Description | example |
---|---|---|---|
tag | i | DOM element tag to target | ?tag=md-icon |
attr | material-icons | Element attribute value to target | ?-attr (false), ?attr=material-icons |
debug | false | Print affected element details to the console | ?debug (true) |
Contributing
Contributing is very much welcome! Get setup by downloading all dependencies.
$ npm install
You can run the example Webpack config output using
$ npm run example-webpack
You can turn debugging on in your webpack config by adding debug as a query param.
loader: 'ligature-to-html-entity?debug'
Unit tests are being written using TAPE and Expect which can be run from npm.
$ npm test