{"id":15490442,"url":"https://github.com/sammarks/icons","last_synced_at":"2026-01-07T09:12:15.124Z","repository":{"id":38174895,"uuid":"254477109","full_name":"sammarks/icons","owner":"sammarks","description":"My personal icon-set, meant to compliment Ant Design Icons","archived":false,"fork":false,"pushed_at":"2023-07-10T22:24:29.000Z","size":3573,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T09:17:08.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://sammarks.github.io/icons/","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/sammarks.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2020-04-09T20:58:49.000Z","updated_at":"2022-03-09T20:54:29.000Z","dependencies_parsed_at":"2024-10-02T07:21:25.594Z","dependency_job_id":"9a47af3c-dd36-4571-93ce-19de5ec1398f","html_url":"https://github.com/sammarks/icons","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":"kylemh/react-svg-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammarks%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammarks%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammarks%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sammarks%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sammarks","download_url":"https://codeload.github.com/sammarks/icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246061829,"owners_count":20717511,"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":[],"created_at":"2024-10-02T07:21:21.312Z","updated_at":"2026-01-07T09:12:15.068Z","avatar_url":"https://github.com/sammarks.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG Icons\n\nThis is a template repository used to quickly scaffold a React SVG Icon library.\n\n## Installation\n\nThis repository isn't published. It exists as a template repository for you to use, populate with SVGs, and maintain an Icon library!\n\nIf you use this template repository, please ensure that the `.browserslistrc` and `svgo.config.js` match defaults that make you and/or your company happy. Additionally, you'll want to change the import path defining `ProductionBundleIconsMap` in both `src/index.test.js` and `src/index.stories.tsx` to match the `name` field of your `package.json`.\n\n## Native\n\nThis library supports React Native. Just import icons using `@sammarks/icons/native` instead of `@sammarks/icons`.\n\nInternally, it uses `react-native-svg`, so make sure that's installed and configured as well.\n\n## Contributing new icons to the library\n\n### Process\n\n- Put your SVG icon into `src/svgs` (or `src/svgs/color` for color SVGs)\n- Ensure that the `svg` includes a `title` element as the first child of the `svg` element.\n  - Its content should be a human-readible description of the SVG (this is for accessibility)\n- Add the correct type-safe mapping in `src/index.ts` (follow the pattern)\n- Add the correct type-safe mapping in `src/native.tsx` (follow the pattern)\n- `yarn format:all` to format the SVGs.\n- `yarn build \u0026\u0026 yarn test -u` to updates snapshots\n- `yarn storybook` to go and see the result of your work in Storybook.\n\n## Usage\n\n### Importing\n\n```JS\nimport { Alert, Basketball } from 'svg-icons';\n```\n\n### Customizing\n\nEvery component accepts all props that you'd expect an inlined `svg` to accept in a React environment. This includes `className`, `style`, `fill`, `width`, `height`, etc.\n\n```JS\nimport { Alert } from 'svg-icons';\n\n\u003cAlert fill=\"#FFF\" width=\"20px\" height=\"20px\" /\u003e\n```\n\n### Considerations when deciding if your icon belongs here\n\n1. If you want the icon to express meaning by itself (without text)...\n\nPlease render the SVG inline into your application. Be sure that `aria-hidden=\"false\"` and also apply an `id` to the `\u003ctitle\u003e` aspect of the SVG. Lastly, give the value of that `id` to the attribute `aria-labelledby` on the actual `\u003csvg\u003e`.\n\n---\n\n2. If you don't want the icon to be customizable (fill, stroke, etc.) via props...\n3. If you want the paths of the icon to be controllable in animations...\n\nThis repository is for uniformly behaving, customizable icon sets. Please render the SVG inline into your application OR please integrate [react-svg-loader](https://github.com/boopathi/react-svg-loader) into your application, steal [our svgo config](./svgo.config.js), and simply manage the implementation yourself.\n\n---\n\n4. If you want the paths of the icon to be customizeable...\n\nYou'll want to make a custom component in your application. Please render the SVG inline into your application OR please integrate [react-svg-loader](https://github.com/boopathi/react-svg-loader) into your application, steal [our svgo config](./svgo.config.js), and simply manage the implementation yourself.\n\n---\n\n5. If the icon has a predefined `fill` attribute on the actual `\u003csvg\u003e`...\n\nNote that `fill` is transformed to be `currentColor`. All you'll need to do is ensure the icon is rendered in a parent element whose CSS property `color` is defined.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammarks%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsammarks%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsammarks%2Ficons/lists"}