Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bemit/icon1
Open Source icon API and picker with pluggable icon providers.
https://github.com/bemit/icon1
icon-api icon-picker icons material-icons material-ui mui simple-icons
Last synced: 21 days ago
JSON representation
Open Source icon API and picker with pluggable icon providers.
- Host: GitHub
- URL: https://github.com/bemit/icon1
- Owner: bemit
- License: mit
- Created: 2021-11-27T15:20:37.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-09T09:48:02.000Z (over 2 years ago)
- Last Synced: 2024-11-15T20:52:39.169Z (about 2 months ago)
- Topics: icon-api, icon-picker, icons, material-icons, material-ui, mui, simple-icons
- Language: TypeScript
- Homepage: https://icon1.bemit.codes
- Size: 1.87 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Icon1
[](https://github.com/bemit/icon1/actions)
[](https://codecov.io/gh/bemit/icon1)
Open-Source Icon API and Picker.
API with pluggable icon providers, ready to host on e.g. Google Cloud Functions, see [DEPLOY.md](DEPLOY.md).
Packages:
- [](https://www.npmjs.com/package/@icon1/core) `@icon1/core`: plain JS API connectors + typings
- [](https://www.npmjs.com/package/@icon1/react) `@icon1/react`: reusable API hooks, icon provider, and icon embed component
- [](https://www.npmjs.com/package/@icon1/mui) `@icon1/mui`: [Material-UI](https://github.com/mui-org/material-ui) based icon picker
## API
Ready and CDN-enabled: [icon1.bemit.codes](https://icon1.bemit.codes)
> ⚠️ **Currently** there are no usage restrictions, depending on the actual occurring costs this may change anytime.
>
> To be safe, host it on your own.
### Endpoints
- `/icons` returns all available provider
- result: `{provider: []}`
- `/icons/{provider}` returns all available icons in that provider
- result: `{icons: []}`
- each icon in the list contains the same data as for `/icon`, except the `svg` code
- `/icon/{provider}/{icon}` returns one specific icon as JSON
- query params:
- `variant`: optional variant, if supported by provider/icon
- `color`: optional color, use 6 digits hex (without `#`)
- minimum result:
```typescript
interface Result {
icon: {
id: string
title: string
data: string
}
}
```
- for plain SVG just add `.svg` at the end
- `/icon/{provider}/{icon}.svg` returns one specific icon as SVG
#### Example Icon Data
`/icon/material-ui/alarm_add`:
- supports `variants`
```json
{
"icon": {
"id": "alarm_add",
"title": "Alarm Add",
"data": "",
"variants": [
"outlined",
"round",
"sharp",
"two-tone"
]
}
}
```
`/icon/simple-icons/3m`:
- does not support `variants`
- includes `source` of icon
- includes `colorDefault` of brand
```json
{
"icon": {
"id": "3m",
"title": "3M",
"data": "3M",
"source": "https://www.3m.com/",
"colorDefault": "#FF0000"
}
}
```
### Build Icon Lists
Build an index of all icons in the providers, is used by `/icons/{provider}` to return all available provider icons.
> needs an already built api
```shell
cd packages/icon1-api
node build/cli build-icon-list
```
> todo: currently hard coded in [`packages/icon1-api/src/icon1/iconListMaker.ts`](./packages/icon1-api/src/icon1/iconListMaker.ts) and is not dynamically using providers
## `@icon1/core`
Basic package with universal typings and a `fetch` based API connector.
```typescript
import { Icon1Icon, Icon1IconDetails, Icon1ListBuilt } from '@icon1/core/Icon1Types'
import { Icon1Loader } from '@icon1/core/Icon1Loader'
const api = 'http://localhost:3030'
Icon1Loader.loadIcon(api, 'simple-icons', '3m', undefined).then(r => console.log(r))
Icon1Loader.loadIcons(api, 'simple-icons').then(r => console.log(r))
```
## `@icon1/react`
Basic package for React with provider, hooks and special embed.
```typescript
import { Icon1Embed } from '@icon1/react/Icon1Embed'
import { Icon1Provider, useIcon1 } from '@icon1/react/Icon1Provider'
import { IconEmbed } from '@icon1/react/IconEmbed'
import { useIcon1Loader } from '@icon1/react/useIcon1Loader'
import { withIcon } from '@icon1/react/withIcon'
import { Icon1Loader } from '@icon1/core/Icon1Loader'
```
## `@icon1/mui`
Material-UI icon picker.
```typescript
import { Icon1Picker } from '@icon1/mui/Icon1Picker'
```
## Versions
This project adheres to [semver](https://semver.org/), until `1.0.0` and beginning with `0.1.0`: all `0.x.0` releases are like MAJOR releases and all `0.0.x` like MINOR or PATCH, modules below `0.1.0` should be considered experimental.
## Develop
1. Clone/fork repository
2. `npm i`
3. `npm run bootstrap && npm run hoist`
4. Now run either:
- `npm start` for cleaning builds, hoisting, launching demo app, compilation of packages and backend
- `npm test` for running tests
- `npm run serve` for launching demo app, compilation of packages and backend
- requires hoisting beforehand
- `npm run tdd` for running tests in watch mode
- `npm run build` for building the demo app and packages
## License
This project is free software distributed under the [**MIT License**](LICENSE).
© 2022 [bemit](https://bemit.codes), [Michael Becker](https://i-am-digital.eu)
### License: Icons
Icons are provided by awesome other projects, integrated by default:
#### Simple Icons
Provided by [simpleicons.org](https://simpleicons.org) under the [CC0 1.0 Universal license](https://github.com/simple-icons/simple-icons/blob/master/LICENSE.md).
Please read their [disclaimer regarding brand use](https://github.com/simple-icons/simple-icons/blob/master/DISCLAIMER.md), if we didn't update yet to the latest version, e.g. where your icon is removed, please open an [issue in this repository](https://github.com/bemit/icon1/issues/new) to request an update.
#### Material-UI
Material design icons are created by Google.
We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0](https://github.com/marella/material-design-icons/blob/main/svg/LICENSE). Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.
> imported using npm module [@material-design-icons/svg](https://www.npmjs.com/package/@material-design-icons/svg)