{"id":27320303,"url":"https://github.com/kidney/postcss-iconfont","last_synced_at":"2025-04-12T09:46:39.187Z","repository":{"id":57328091,"uuid":"84017867","full_name":"kidney/postcss-iconfont","owner":"kidney","description":"Create SVG/TTF/EOT/WOFF/WOFF2 fonts from several SVG icons with PostCSS","archived":false,"fork":false,"pushed_at":"2017-03-23T15:49:47.000Z","size":48,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T17:45:57.895Z","etag":null,"topics":["hooks","icon-font","iconfont","postcss","postcss-plugin","svg-icons","webfont"],"latest_commit_sha":null,"homepage":"","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/kidney.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}},"created_at":"2017-03-06T01:45:57.000Z","updated_at":"2024-05-31T08:04:08.000Z","dependencies_parsed_at":"2022-08-23T14:01:08.302Z","dependency_job_id":null,"html_url":"https://github.com/kidney/postcss-iconfont","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidney%2Fpostcss-iconfont","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidney%2Fpostcss-iconfont/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidney%2Fpostcss-iconfont/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidney%2Fpostcss-iconfont/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kidney","download_url":"https://codeload.github.com/kidney/postcss-iconfont/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550628,"owners_count":21122930,"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":["hooks","icon-font","iconfont","postcss","postcss-plugin","svg-icons","webfont"],"created_at":"2025-04-12T09:46:34.560Z","updated_at":"2025-04-12T09:46:39.177Z","avatar_url":"https://github.com/kidney.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-iconfont\n\u003e Create SVG/TTF/EOT/WOFF/WOFF2 fonts from several SVG icons with [PostCSS](http://postcss.org/).\n\n[![npm](https://img.shields.io/npm/v/postcss-iconfont.svg)](https://www.npmjs.com/package/postcss-iconfont)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/kidney/postcss-iconfont/master/LICENSE)\n\n\n[中文文档](https://github.com/kidney/postcss-iconfont/blob/master/README.zh-CN.md)\n\n\n`postcss-iconfont` is based on `gulp-iconfont`,  In the `postcss` or `webpack` environment, it is easier to convert `svg` to webfont.\n\n## Installation\n\nInstall `postcss-iconfont` as a development dependency:\n\n```shell\nnpm install postcss-iconfont --save-dev\n```\n\n\n\n## Usage\n\n### Node\n\nUse [iconfont](https://github.com/kidney/postcss-iconfont) in your script:\n\n```javascript\nvar postcss = require('postcss');\nvar iconfont = require('postcss-iconfont');\n\nvar options = {\n    outputPath: './dist/fonts/'\n};\n\npostcss([iconfont(options)])\n    .process(css)\n    .then(function(result) {\n        fs.writeFileSync('./dist/style.css', result.css);\n    });\n```\n\n### Webpack\n\nUse [iconfont](https://github.com/kidney/postcss-iconfont) in your webpack.config.js:\n\n*Webpack 1.x*\n\n```js\npostcss: function () {\n    return [\n        ...\n        iconfont({\n            outputPath: './dist/fonts/'\n        })\n        ...\n    ];\n}\n```\n\n*Webpack 2.x*\n```js\nplugins: [\n    new webpack.LoaderOptionsPlugin({\n        options: {\n            ...\n            postcss: [\n                ...\n                iconfont({\n                    outputPath: './dist/fonts/'\n                })\n            ]\n        }\n    }),\n...\n]\n```\n\n\n\n\n## Options\n\n### basePath\n\nYour base path that will be used for svg files with absolute CSS urls.\n\nType: `String`\n\nDefault: `./`\n\n### stylesheetPath\n\nRelative path to the folder that will keep your stylesheet file.\n\nType: `String`\n\nDefault: `null`\n\n\n### outputPath\n\nRelative path to the folder that will keep your output font file.\n\nType: `String`\n\nDefault: `./`\n\n\n### publishPath\n\nThe url to the output directory resolved relative to the HTML page\n\nType: `String`\n\nDefault: ``\n\n\n### formats\n\nthe same `gulp-iconfont`formats\n\nType: `String`\n\nDefault: `['svg', 'ttf', 'eot', 'woff']`\n\n\n### hooks\n\nType: `Object`\n\nDefault: `{}`\n\n#### hooks.onUpdateRule\nHook that allows to rewrite the CSS output.\n\nType: `function`\n\nDefault: `null`\n\n### options.*\nThe [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont/blob/master/README.md#options) are available:\n\n- ~~options.fontName~~ (The configuration is invalid, and this value is taken in the style `font-family`)\n- options.autohint\n- options.fontWeight\n- options.fontStyle\n- options.fixedWidth\n- options.centerHorizontally\n- options.normalize\n- options.fontHeight\n- options.round\n- options.descent\n- options.metadata\n- options.startUnicode\n- options.prependUnicode\n- options.timestamp\n\n\n## Preparing SVG's\n\nSee: https://github.com/nfroidure/gulp-iconfont#preparing-svgs\n\n\n\n## Example\n\n```shell\n└┬ demo/\n ├─┬ css/\n │ └─ style.css\n ├── fonts/\n └─┬ svg/\n   ├─ arrow-up-left.svg\n   └─ arrow-up-right.svg\n```\n\nstyle.css\n\n```css\n// before\n@font-face {\n  font-family: 'iconfont';\n  src: url('./fonts/*.svg');\n  font-weight: normal;\n  font-style: normal;\n}\n```\n\n```css\n// after\n@font-face {\n  font-family: 'iconfont';\n  src:  url('fonts/iconfont.eot');\n  src:  url('fonts/iconfont.eot#iefix') format('embedded-opentype'),\n    url('fonts/iconfont.ttf') format('truetype'),\n    url('fonts/iconfont.woff') format('woff'),\n    url('fonts/iconfont.svg?#iconfont') format('svg');\n  font-weight: normal;\n  font-style: normal;\n}\n\n[class^=\"iconfont-\"], [class*=\" iconfont-\"] {\n  font-family: 'iconfont' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.iconfont-arrow-up-left:before {\n  content: \"\\EA01\";\n}\n.iconfont-arrow-up-right:before {\n  content: \"\\EA02\";\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkidney%2Fpostcss-iconfont","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkidney%2Fpostcss-iconfont","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkidney%2Fpostcss-iconfont/lists"}