Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geakstr/entypo-icons
Entypo+ icons. 411 carefully crafted premium pictograms
https://github.com/geakstr/entypo-icons
entypo icons react
Last synced: 2 months ago
JSON representation
Entypo+ icons. 411 carefully crafted premium pictograms
- Host: GitHub
- URL: https://github.com/geakstr/entypo-icons
- Owner: geakstr
- Created: 2018-12-20T08:17:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:58:43.000Z (about 2 years ago)
- Last Synced: 2024-10-13T22:46:46.527Z (3 months ago)
- Topics: entypo, icons, react
- Language: TypeScript
- Homepage:
- Size: 2.26 MB
- Stars: 17
- Watchers: 2
- Forks: 8
- Open Issues: 47
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
Entypo+ — 411 carefully crafted premium pictograms by Daniel Bruce (CC BY-SA 4.0)
@entypo-icons/* packages wrap these icons into modular and useful components.
## Installation
`npm install @entypo-icons/core @entypo-icons/utils @entypo-icons/react --save`
## Usage
For now only react components are available.
```jsx
import { EntypoIcon, EntypoSprite } from "@entypo-icons/react";
// Somewhere at the top level of application
...
// Just use any icons everywhere
```
## Description and advanced usage
There are several options how to load icons. Each of options has pros and cons described below. Choose the right option for your cases.
### `EntypoManager`
In most cases this is the best option from a user perspective, but it requires granular setup from a developer. `EntypoManager` builds icons library. Icons from library will be bundled into application and will be preloaded before actual usage at runtime.
#### ✅ Pros
- Only imported icons will be bundled to application (small bundle size).
- Icons will be preloaded before usage (user will see icons immediately after application was loaded).
#### ❗️ Cons
- Need to import each icon separately (so boring).
- In case of using a large number (say hundreds) of icons application bundle size will grow.
```jsx
// Import each icon separately
import iconCake from "@entypo-icons/core/icons/cake";
import iconFlower from "@entypo-icons/core/icons/flower";
import { EntypoManager } from "@entypo-icons/utils";
import { EntypoIcon } from "@entypo-icons/react";
// Add them to library.
// It's ok to call `addIcons` multiple times at any time at any places
EntypoManager.addIcons(iconCake, iconFlower);
...
// Use icons from library everywhere
```
### Asynchronous `` (remote sprite)
This component will load all icons (as one sprite file) at once from remote host.
#### ✅ Pros
- All icons will be available (useful, no need to import each icon separately).
- Icons won't bundled into application (zero-cost from bundle size perspective).
#### ❗️ Cons
- It will take some time to load sprite by HTTP (user will see nothing before icons are loaded).
```jsx
import { EntypoIcon, EntypoSprite } from "@entypo-icons/react";
// Somewhere at the top level of application
{/* will load sprite from package bundle from unpkg.com */}
{/* also it's possible to provide `url` to load from your place */}
...
// Just use any icons everywhere
...
...
```
### Synchronous `` (bundled sprite)
This component will bundle all icons into application.
#### ✅ Pros
- All icons will be available (useful, no need to import each icon separately).
- Icons will be preloaded before usage (user will see icons immediately after application was loaded).
#### ❗️ Cons
- Bundle will contain all icons (~60 Kb gzipped).
```jsx
import sprite from "@entypo-icons/core/sprite";
import { EntypoIcon, EntypoSprite } from "@entypo-icons/react";
// Somewhere at the top level of application
...
// Just use any icons everywhere
...
...
```