A React Component Library of iOS icons with high-level props and types
🐢 Getting started
Setup
Install the dependency
Depdending on your package manager, here are two examples:
NPM :
npm install react-ios-iconsYARN :yarn add react-ios-icons
Import an icon
Example 1
import { Battery } from 'react-ios-icons'
// Renders the one-fifth of battery's capacity
export const DummyComponent: React.FC = () => {
return <Battery progression={75} />
}
Example 2
import {} from 'react-ios-icons'
Current version
Icons are imported straight from SF Symbols 3 apple developers platform with its features being developed over time. We’re looking forward for a migration to it’s 4th version which has been released recently by the WWDC22 but definitely not on the top of our priorities.
More details about SF Symbols 4 here.
These are the supported icon versions beside extra details to get familiar with if you want.
| SF Symbols Version | iOS Version | macOS Version | tvOS Version | watchOS Version |
|---|---|---|---|---|
| 3.0 | 15.0 | 12.0 | 15.0 | 8.0 |
| 3.1 | 15.1 | 12.0 | 15.1 | 8.1 |
| 3.2 | 15.2 | 12.1 | 15.2 | 8.3 |
| 3.3 | 15.4 | 12.3 | 15.4 | 8.5 |
Contributing
If you would like to contribute and improve our project, we’ve set certain rules to maintain a better scoial and development environment, almost everything is mentioned in the CONTRIBUTING.md file.
Where do I start?
In order to create an icon, you need to generate one by executing:
NPM :
npm run generate <ComponentName>YARN :yarn generate <ComponentName>
2 questions will be asked to you which helps giving instructions that will be provide a start code for your icon.