{"id":13431898,"url":"https://github.com/c8r/pixo","last_synced_at":"2025-04-06T08:11:23.084Z","repository":{"id":32068999,"uuid":"94634089","full_name":"c8r/pixo","owner":"c8r","description":"Convert SVG icons into React components","archived":false,"fork":false,"pushed_at":"2022-12-29T23:34:30.000Z","size":434,"stargazers_count":366,"open_issues_count":16,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-30T07:07:46.378Z","etag":null,"topics":["cli","components","icon","icons","react","svg"],"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/c8r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-17T15:59:44.000Z","updated_at":"2025-03-17T08:01:11.000Z","dependencies_parsed_at":"2023-01-14T20:26:37.882Z","dependency_job_id":null,"html_url":"https://github.com/c8r/pixo","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fpixo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fpixo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fpixo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c8r%2Fpixo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c8r","download_url":"https://codeload.github.com/c8r/pixo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451651,"owners_count":20940939,"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":["cli","components","icon","icons","react","svg"],"created_at":"2024-07-31T02:01:06.866Z","updated_at":"2025-04-06T08:11:23.063Z","avatar_url":"https://github.com/c8r.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# pixo\n\nConvert SVG icons into React components\n\n```sh\nnpm i pixo\n```\n\nPass a directory or SVG file path as the first argument.\n\n```sh\n$ pixo src --out-dir dist\n```\n\nEach SVG icon will be automatically optimized and renamed to a pascal case filename for the component.\nIcon components can then be imported into a React application.\n\n```jsx\nimport React from 'react'\nimport CheckIcon from './CheckIcon'\n\nconst App = props =\u003e (\n  \u003cdiv\u003e\n    \u003cCheckIcon /\u003e\n  \u003c/div\u003e\n)\n```\n\nThe default component template includes props for:\n\n- `size` (number) pixel width and height (default `24`)\n- `color` (string) color value passed to the SVG `fill` attribute (default `'currentcolor'`)\n\n## SVG Requirements\n\nEach SVG icon **must** conform to the following:\n\n- Use a square `viewBox` attribute, preferably `0 0 24 24`\n- Only use a single color (e.g. black)\n- For best results, only use `\u003cpath\u003e` elements\n- Do *not* use transforms\n\nPixo includes experimental support for `\u003ccircle\u003e`, `\u003cpolygon\u003e`, and `\u003crect\u003e` elements.\n\nThe following elements will be ignored:\n- Elements within a `\u003cdefs\u003e` or `\u003cclipPath\u003e`\n- Elements with the `fill=\"none\"` attribute\n- `\u003cellipse\u003e` elements\n- `\u003cline\u003e` elements\n- `\u003cpolyline\u003e` elements\n\n### Converting SVG shapes into `\u003cpath\u003e` elements\n\nMost graphics applications can convert shapes into SVG paths.\n\n- Adobe Illustrator: use the `Compound Path` command\n- Figma: TK\n- Sketch: TK\n\n## Templates\n\nPixo uses a default template for rendering, but includes some built-in options.\n\n- `default`: plain SVG with no styling\n- `styledSystem`: [styled-component][sc] with margin, padding, and color props from [styled-system][sys]\n\n### Custom Templates\n\nTo use a custom template, pass a path to your template to the `--template` flag.\n\n```sh\npixo icons --template custom-template.js\n```\n\nA template should be a function that returns a string for the component source code, written as a Node.js module.\n\n```js\n// default template\nmodule.exports = ({\n  name,\n  viewBox,\n  pathData\n}) =\u003e `import React from 'react'\n\nconst ${name}Icon = ({\n  size,\n  color,\n  ...props\n}) =\u003e (\n  \u003csvg\n    {...props}\n    viewBox='${viewBox}'\n    width={size}\n    height={size}\n    fill={color}\n  \u003e\n    \u003cpath d='${pathData}' /\u003e\n  \u003c/svg\u003e\n)\n\n${name}Icon.displayName = '${name}Icon'\n\n${name}Icon.defaultProps = {\n  size: 24,\n  color: 'currentcolor'\n}\n\nexport default ${name}`\n```\n\n**Template function arguments**\n\n- `name` camel cased name that can be used for the component name\n- `viewBox` the original viewBox value from the SVG\n- `pathData` extracted path data for the `\u003cpath\u003e` element's `d` attribute\n\n## Options\n\nOptions can be passed as flags to the CLI or added to a `pixo` field in your `package.json`\n\nRun `pixo --help` to see the list of options.\n\n- `outDir` (string) output directory (default dist)\n- `template` (string) name of built-in template or path to custom template\n- `index` (boolean) create an `index.js` barrel module\n- `iconComponent` (boolean) create an `Icon.js` wrapper component\n- `recursive` (boolean) recursively read all SVGs in subdirectories\n\n**CLI flags**\n\n```sh\n-d --out-dir          Output directory\n-t --template         Name of built-in template or path to custom template\n-i --index            Include index.js barrel module\n-c --icon-component   Include wrapper Icon.js component\n-r --recursive        Recursively read all SVGs in subdirectories\n```\n\n**Example `package.json`**\n\n```json\n{\n  \"pixo\": {\n    \"outDir\": \"dist\",\n    \"template\": \"./custom-template.js\",\n    \"index\": true,\n    \"iconComponent\": true,\n    \"recursive\": true\n  }\n}\n```\n\n## Related\n\n- [Microicon](https://icon.now.sh)\n- [Building SVG Icons with React](http://jxnblk.com/react-icons/)\n- [Reline](https://github.com/jxnblk/reline)\n- [React Icons](https://github.com/gorangajic/react-icons)\n- [Making SVG Icon Libraries for React Apps](http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/)\n- [babel-plugin-inline-react-svg](https://github.com/kesne/babel-plugin-inline-react-svg)\n- [svg-react-loader](https://github.com/jhamlet/svg-react-loader)\n- [react-svg-loader](https://github.com/boopathi/react-svg-loader)\n\n---\n\n[sc]: https://github.com/styled-components/styled-components\n[sys]: https://github.com/jxnblk/styled-system\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc8r%2Fpixo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc8r%2Fpixo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc8r%2Fpixo/lists"}