{"id":13439176,"url":"https://github.com/jantimon/iconfont-webpack-plugin","last_synced_at":"2025-04-05T17:09:44.364Z","repository":{"id":37734923,"uuid":"68103136","full_name":"jantimon/iconfont-webpack-plugin","owner":"jantimon","description":"Simple icon font handling for webpack","archived":false,"fork":false,"pushed_at":"2024-01-22T20:47:19.000Z","size":3399,"stargazers_count":112,"open_issues_count":22,"forks_count":34,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-29T16:09:12.885Z","etag":null,"topics":["css","icon-font","postcss","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jantimon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-09-13T11:41:37.000Z","updated_at":"2024-05-31T08:03:05.000Z","dependencies_parsed_at":"2024-02-17T03:30:27.916Z","dependency_job_id":"5baa4971-3e0f-4856-bf67-28ba5674c24d","html_url":"https://github.com/jantimon/iconfont-webpack-plugin","commit_stats":{"total_commits":88,"total_committers":12,"mean_commits":7.333333333333333,"dds":"0.19318181818181823","last_synced_commit":"cf4b8eb1f147f17f76e44b705f2c96aa4349c09b"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ficonfont-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ficonfont-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ficonfont-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jantimon%2Ficonfont-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jantimon","download_url":"https://codeload.github.com/jantimon/iconfont-webpack-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369954,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","icon-font","postcss","webpack"],"created_at":"2024-07-31T03:01:11.759Z","updated_at":"2025-04-05T17:09:44.345Z","avatar_url":"https://github.com/jantimon.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# Icon Font Webpack Plugin\n[![npm version](https://badge.fury.io/js/iconfont-webpack-plugin.svg)](http://badge.fury.io/js/iconfont-webpack-plugin) [![Dependency Status](https://david-dm.org/jantimon/iconfont-webpack-plugin.svg)](https://david-dm.org/jantimon/iconfont-webpack-plugin) [![CI](https://github.com/jantimon/iconfont-webpack-plugin/workflows/CI/badge.svg)](https://github.com/jantimon/iconfont-webpack-plugin/actions/)\n\n[![icon font webpack plugin demo](https://raw.githubusercontent.com/jantimon/iconfont-webpack-plugin/master/iconfont.gif)](https://codepen.io/jantimon/pen/YoKewb)  \nThis plugin tries to keep the usage and maintenance of icon fonts as simple as possible.\n\n```css\na:before {\n  font-icon: url('./account.svg');\n}\n```\n\nBrowser Support: IE9+  \nPreprocessor Support: All - works with sass, less, stylus, postcss, vanilla css, ...\n\n# Requirements\n\nThis plugin requires:\n + webpack 3.x or higher \n + postcss-loader 2.x or higher\n + css-loader 3.x or higher\n + node 10 or higher\n\n## Installation\n\n```bash\nnpm i --save-dev postcss-loader webpack css-loader\nnpm i --save-dev iconfont-webpack-plugin\n```\n\n## Configuration\n\nAll you have to do is to add the plugin to your postcss loader plugins inside your `webpack.config.js`:\n\n```js\nconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          {\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: (loader) =\u003e {\n                return {\n                  plugins: [\n                    new IconfontWebpackPlugin({\n                      resolve: loader.resolve\n                    })\n                  ]\n                };\n              }\n            }\n          }\n        ]\n      }\n    ]\n  }\n```\n\n## Advanced Configuration\n\nProbably you won't need this but you can also pass some additional options.\n\n|Name|Type|Default|Description|\n|:--:|:--:|:-----:|:----------|\n|**`resolve`**|`{Function}`||Required - A function which resolves the svg paths. See [resolve](https://webpack.js.org/api/loaders/#this-resolve)|\n|**`fontNamePrefix`**|`{String}`|`''`| Allows to prefix the generated font name |\n|**`enforcedSvgHeight`**|`{number}`|`1000`| Scales all svg to the given height |\n\n```js\nconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');\n\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          {\n            loader: 'postcss-loader',\n            postcssOptions: (loader) =\u003e {\n              return {\n                plugins: [\n                  new IconfontWebpackPlugin({\n                    resolve: loader.resolve,\n                    fontNamePrefix: 'custom-',\n                    enforcedSvgHeight: 3000,\n                  })\n                ]\n              };\n            }\n          }\n        ]\n      }\n    ]\n  }\n```\n\n## Usage\n\nAfter setting up the plugin your css has now a new feature:  \n`font-icon` declarations\n\n```css\na:before {\n  font-icon: url('./account.svg');\n  transition: 0.5s color;\n}\n\na:hover:before {\n  color: red;\n}\n```\n\nand it will be compiled into:\n\n```css\n@font-face {\n  font-family: i96002e;\n  src: url(\"data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAA.....IdAA==\") format('woff');\n}\n\na:before {\n  font-family: i96002e;\n  content: '\\E000';\n  transition: 0.5s color;\n}\n\na:hover:before {\n  color: red;\n}\n```\n\n## Icon sizes\n\nShorthand for setting the icon size and the icon:\n\n```css\na:before {\n  font-icon: 80% url('./account.svg');\n}\n```\n\n## SVG Requirements\n\nThe main work of the iconfont-webpack-plugin is done by [svg2ttf](https://github.com/fontello/svg2ttf) which converts svgs into fonts.  \nTherefore it inherits all its [limitations](https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images).\n\n1. Remove all fills and colors. You can probably leave black fills. In fonts, fill is defined by contour direction. Make sure that you don't have any complex rules like evenodd fills.\n2. Remove all FAT line attributes. This is not supported by Fontello. In fonts, fat lines are drown by 2 nested contours.\n3. Join all contours to a single outline. This is the last and the most important step. Usually editors automatically set the correct contour direction depending on nesting and black fills.\n\n## Should you use icon fonts for everything?\n\nNo.\n\nIcon fonts are really good for decorative icons (where the icon is purely ornamental and doesn’t incorporate core meaning or functionality).\n\nFor critical icons without fallbacks (like a hamburger menu icon) you should rather use SVGs.\nBut also JPEGs, PNGs and even GIFs have their use cases.\n\nPick the best solution for your problem - there is no silver bullet.\nWith this plugin it is pretty easy to use pixel images, svgs and font-icons side by side.\n\n## When should you use icon fonts over pure SVGs?\n\nSVGs have some disadvantages and lack certain features especially when used inside pseudo elements:\n\n* [CSS-Transform issues in older Internet Explorer versions](http://stackoverflow.com/questions/21298338/css-transform-on-svg-elements-ie9)\n* [IE9 - IE 11 scaling issues](https://gist.github.com/larrybotha/7881691)\n* Fill color doesn't work for background SVG images\n* Inline SVGs are resolved relative to the page not to the css\n* You want to use background-clip:text\n\n## What about all the rant on icon fonts?\n\nLike all technologies there are disadvantages when using icon fonts.  \nWe tried to apply best practices to solve the main issues for you.\n\n* Screen Reader friendly: All generated icons use the [Unicode Private Use Areas](https://en.wikipedia.org/wiki/Private_Use_Areas)\n* Prevents [FOUT](http://www.paulirish.com/2009/fighting-the-font-face-fout/)\n\n# License\n\nThis project is licensed under [MIT](https://github.com/jantimon/iconfont-webpack-plugin/blob/master/LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjantimon%2Ficonfont-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjantimon%2Ficonfont-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjantimon%2Ficonfont-webpack-plugin/lists"}