Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zkreations/icons
Handcrafted line by line, for as little code as possible
https://github.com/zkreations/icons
icon icon-pack icons icons-pack iconset open-source svg svg-icons svg-sprites svgo
Last synced: about 2 months ago
JSON representation
Handcrafted line by line, for as little code as possible
- Host: GitHub
- URL: https://github.com/zkreations/icons
- Owner: zkreations
- License: mit
- Created: 2022-12-11T20:12:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T14:47:04.000Z (4 months ago)
- Last Synced: 2024-11-08T22:17:36.981Z (about 2 months ago)
- Topics: icon, icon-pack, icons, icons-pack, iconset, open-source, svg, svg-icons, svg-sprites, svgo
- Language: JavaScript
- Homepage: https://meteoricons.com/
- Size: 609 KB
- Stars: 20
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## About these icons
SVG icons are scalable, weigh much less than images, are editable with CSS, and much more. However, the main problem (at least for me) is their code, which tends to be very large.
That's why I manually designed the code for each icon in order to make **smart decisions** to achieve the least amount of code possible. This task was made easier thanks to the [svg-path-editor](https://yqnn.github.io/svg-path-editor/) tool. I have named this pack "Meteor icons" and it is **open source**.
## Installation
```
npm install meteor-icons
```
## Getting Started
The following CSS code helps to keep the SVG tag cleaner, and it will also allow you to quickly customize the icons:
```css
.i {
stroke-width: var(--i-stroke, 2);
width: var(--i-size, 24px);
height: var(--i-size, 24px);
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
```
You can set the size and thickness with CSS variables:
| Variable | Default
| ---------------- | --------
| `--i-stroke` | `2`
| `--i-size` | `20px`
## Inline SVG
Choose any icon from the [demo page](https://icons.zkreations.com/), copy its code, and paste it into your project.
## SVG Sprite
Add the [svg-sprite.svg](https://github.com/zkreations/icons/blob/main/variants/svg-sprite.svg) file to your project. Now, anywhere in your project, include the icons using this code:
```xml
```
> Replace **"github"** with the name of an icon from the [demo page](https://icons.zkreations.com/).
## Blogger
If your project is a Blogger template, add the [icons.xml](https://github.com/zkreations/icons/blob/main/variants/icons.xml) inclusion. To include it, you will need `b:defaultmarkups` tags, for example:
```xml
```
After including it, you can call any icon anywhere in the template using a `b:include` tag, for example:
```xml
```
> Replace **"github"** with the name of an icon from the [demo page](https://icons.zkreations.com/).
The inclusion has some parameters that allow you to customize the resulting SVG tag. The available parameters are:
| Parameter | Description
| -------------- | ------------
| `icon` | Icon name
| `class` | Additional classes
| `viewbox` | `viewbox` attribute
| `fill` | `fill` attribute
| `width` | `width` attribute
| `height` | `height` attribute
Here's an example adding some attributes to the Blogger inclusion:
```xml
```
## Contributing
All icons are designed by [Daniel Abel](https://twitter.com/danieI_abel), but you can help maintain or improve this project by considering the following points:
- Improve the design and consistency of the icons
- Keep the SVG code as small as possible
- In case of requesting an icon, leave a clear example
- In case of contributing an icon, you must be the original author
If you want, you can also help me maintain this and more projects by [buying me a coffee](https://ko-fi.com/zkreations) ☕. I will appreciate it very much 👏.
## License
**Meteor icons** is licensed under the MIT License