https://github.com/sammarks/icons
My personal icon-set, meant to compliment Ant Design Icons
https://github.com/sammarks/icons
Last synced: about 2 months ago
JSON representation
My personal icon-set, meant to compliment Ant Design Icons
- Host: GitHub
- URL: https://github.com/sammarks/icons
- Owner: sammarks
- License: mit
- Created: 2020-04-09T20:58:49.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T22:24:29.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T09:17:08.565Z (2 months ago)
- Language: JavaScript
- Homepage: https://sammarks.github.io/icons/
- Size: 3.41 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Icons
This is a template repository used to quickly scaffold a React SVG Icon library.
## Installation
This repository isn't published. It exists as a template repository for you to use, populate with SVGs, and maintain an Icon library!
If 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`.
## Native
This library supports React Native. Just import icons using `@sammarks/icons/native` instead of `@sammarks/icons`.
Internally, it uses `react-native-svg`, so make sure that's installed and configured as well.
## Contributing new icons to the library
### Process
- Put your SVG icon into `src/svgs` (or `src/svgs/color` for color SVGs)
- Ensure that the `svg` includes a `title` element as the first child of the `svg` element.
- Its content should be a human-readible description of the SVG (this is for accessibility)
- Add the correct type-safe mapping in `src/index.ts` (follow the pattern)
- Add the correct type-safe mapping in `src/native.tsx` (follow the pattern)
- `yarn format:all` to format the SVGs.
- `yarn build && yarn test -u` to updates snapshots
- `yarn storybook` to go and see the result of your work in Storybook.
## Usage
### Importing
```JS
import { Alert, Basketball } from 'svg-icons';
```
### Customizing
Every 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.
```JS
import { Alert } from 'svg-icons';
```
### Considerations when deciding if your icon belongs here
1. If you want the icon to express meaning by itself (without text)...
Please render the SVG inline into your application. Be sure that `aria-hidden="false"` and also apply an `id` to the `` aspect of the SVG. Lastly, give the value of that `id` to the attribute `aria-labelledby` on the actual ``.
---
2. If you don't want the icon to be customizable (fill, stroke, etc.) via props...
3. If you want the paths of the icon to be controllable in animations...
This 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.
---
4. If you want the paths of the icon to be customizeable...
You'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.
---
5. If the icon has a predefined `fill` attribute on the actual ``...
Note 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.