{"id":20119,"library":"iconfont-webpack-plugin","title":"iconfont-webpack-plugin","description":"Webpack plugin that simplifies icon font usage by allowing inline SVG references in CSS via the `font-icon` property. It converts SVGs into webfonts during the build, supporting all CSS preprocessors (Sass, Less, Stylus, PostCSS, vanilla CSS). Current stable version is 5.0.1, compatible with webpack >=3. Key differentiator: eliminates manual icon font generation tools; works seamlessly with webpack's resolve and PostCSS. Caveat: requires postcss-loader and css-loader as peer dependencies (v2+ and v4+ respectively).","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/jantimon/iconfont-webpack-plugin","tags":["javascript","webpack","plugin","html","iconfont"],"install":[{"cmd":"npm install iconfont-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add iconfont-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add iconfont-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: webpack >=3 for plugin integration","package":"webpack","optional":false},{"reason":"Peer dependency: postcss-loader >=2 for PostCSS plugin integration","package":"postcss-loader","optional":false},{"reason":"Peer dependency: css-loader >=4 for CSS module handling","package":"css-loader","optional":false}],"imports":[{"note":"The package does not ship ESM; use CommonJS require.","wrong":"import IconfontWebpackPlugin from 'iconfont-webpack-plugin';","symbol":"IconfontWebpackPlugin","correct":"const IconfontWebpackPlugin = require('iconfont-webpack-plugin');"}],"quickstart":{"code":"// webpack.config.js\nconst IconfontWebpackPlugin = require('iconfont-webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          {\n            loader: 'postcss-loader',\n            options: {\n              postcssOptions: (loader) => ({\n                plugins: [\n                  new IconfontWebpackPlugin({\n                    resolve: loader.resolve\n                  })\n                ]\n              })\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n\n/* style.css */\na:before {\n  font-icon: url('./account.svg');\n}","lang":"javascript","description":"Setup webpack config with IconfontWebpackPlugin and use font-icon in CSS to inline SVGs as icon font."},"warnings":[{"fix":"Ensure you pass `resolve: loader.resolve` in the PostCSS plugin options.","message":"⚠️ This plugin requires webpack's resolve function passed from loader context. Failing to pass `resolve` will cause build errors.","severity":"error","affected_versions":">=1.0"},{"fix":"Preprocess SVGs to remove fill and stroke attributes, or ensure they use black fill only.","message":"SVG files must have all fills/colors removed before conversion. The plugin does not strip them automatically.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Always run CSS through postcss-loader with this plugin.","message":"The `font-icon` property is non-standard CSS. It will not work without this plugin processing the CSS.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Run `npm install --save-dev postcss-loader css-loader` in your project.","message":"⚠️ Breaking: In v5, the plugin no longer includes postcss-loader in its own dependencies. You must install `postcss-loader` and `css-loader` separately.","severity":"error","affected_versions":">=5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure postcss-loader is configured with a `postcssOptions` function returning plugins array containing IconfontWebpackPlugin.","cause":"Missing `postcssOptions` configuration in webpack rule for postcss-loader.","error":"Error: PostCSS plugin iconfont-webpack-plugin requires postcssOptions"},{"fix":"Install postcss-loader: `npm install --save-dev postcss-loader`","cause":"Missing required peer dependency postcss-loader.","error":"Error: Cannot find module 'postcss-loader'"},{"fix":"Verify that CSS files are processed by postcss-loader with this plugin as a PostCSS plugin.","cause":"CSS not processed by the plugin, or plugin not correctly configured.","error":"Error: 'font-icon' property is not allowed in CSS"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}