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">&#xf20e;</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.resolve(__dirname, '../', 'node_modules'),
    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.

<i className="material-icons">face</i>  <!-- becomes  -->  <i className="material-icons">&#xf20e;</i>

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

<md-icon>face</md-icon>   -->   <md-icon>&#xf20e;</md-icon>

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