Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
halfmage committed Mar 29, 2024
1 parent 56de03a commit 6aff350
Showing 1 changed file with 15 additions and 21 deletions.
36 changes: 15 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
![npm](https://img.shields.io/npm/v/pixelarticons.svg?color=green&label=npm&style=popout-square)
![npm](https://img.shields.io/npm/dt/pixelarticons.svg?color=blue&style=popout-square)

359 careful handmade pixel art icons based on a 24x24 grid and `currentColor` fills. All icons were made individually using rectangles to recreate a non-anti-aliased look. It makes use of subtle padding for each icon. It is recommended to use the icons with a width and height of 24px, 48px, 72px, 96px because on all scales outside of 24px the icons will appear blurry.
486 careful handmade pixel art icons based on a 24x24 grid and `currentColor` fills. All icons were made individually using rectangles to recreate a non-anti-aliased look. It makes use of subtle padding for each icon. It is recommended to use the icons with a width and height of 24px, 48px, 72px, 96px because on all scales outside of 24px the icons will appear blurry.

## How to get the icons

Expand All @@ -13,40 +13,34 @@
- Use them directly in your code: 👇

## Gettings Started
### Use any icons staticly from CDN
```html
<!-- get the file icon from unpkg -->
<img src="https://unpkg.com/pixelarticons@latest/svg/file.svg" />

<!-- get the file icon from jsdelivr -->
<img src="https://cdn.jsdelivr.net/npm/pixelarticons@latest/svg/file.svg>
```
### Install via package manager
```bash
npm i pixelarticons # or yarn add pixelarticons
```
```jsx
// import the file.svg icon directly
import File from "pixelarticons/svg/file.svg";
npm i pixelarticons@1.8.0
```
### Insert plain svg code

### Use directly via unpkg (replace "file")
```html
<!-- the file.svg directly in html -->
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 22h18V8h-2V6h-2v2h-2V6h2V4h-2V2H3v20zm2-2V4h8v6h6v10H5z" fill="currentColor" />
</svg>
<img src="https://unpkg.com/pixelarticons@1.8.0/svg/file.svg" />
```

## Generate webfont

Thanks to @Cerallin you can easily create all webfont files with a simple npm command which puts all icons in various webfont formats into a `./fonts/` folder.

```bash
npm run font
```


## Current tasks

- [x] Figma file with components
- [x] Updating SVG source code for all icons
- [x] Convert all rectangles into SVG-paths
- [X] Make public Figma-file with icon library
- [ ] Add a new filled set
- [x] Make public Figma-file with icon library
- [x] Add a new filled set
- [ ] Add a new 32x32 set
- [ ] Add brands and social media icons

## Where else to find?

Expand Down

0 comments on commit 6aff350

Please sign in to comment.