Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/city-of-helsinki/hel-icons
City of Helsinki style icon library
https://github.com/city-of-helsinki/hel-icons
icon-pack svg-icons
Last synced: about 1 month ago
JSON representation
City of Helsinki style icon library
- Host: GitHub
- URL: https://github.com/city-of-helsinki/hel-icons
- Owner: City-of-Helsinki
- Created: 2017-07-10T14:36:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-03T05:00:48.000Z (over 5 years ago)
- Last Synced: 2024-11-10T06:34:35.671Z (about 1 month ago)
- Topics: icon-pack, svg-icons
- Language: CSS
- Homepage: https://city-of-helsinki.github.io/hel-icons/
- Size: 1.7 MB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Helsinki SVG icons
City of Helsinki brand identity icon set.
## Installation
```
npm install hel-icons
```
you only need hel-icons.svg file.
## How to use
Insert icon in inline content.
```
```
To make sure icons appear correct size depending on context include this default to styles
```
.icon {
width:1em;
height:1em
}
```
## Accessibility
### Decorative icon
When icon is used for decoration or emphasis it should be hidden from screen readers with `aria-hidden=true`
### Interactive icon without text
When the icon is used without explanatory text as purely visual cue in UI you should provide a screen reader -friendly aria-label. In interactive elements this should be included in the wrapping `` or `` element.
```
```
### Informative icon without text
When icon is not wrapped in interactive element, svg title can be used.
```
Book
```
## Browser support
This spritemap displays fine in Chrome, Safari 7.1+, Firefox, and Opera.
For extended browser support (Safari 6, IE 6+, and Edge 12) you should use [svg4everybody](https://github.com/jonathantneal/svg4everybody).
## Contribution
Clone the repository.
Install dependencies.
```
npm install
```
Add new svg files in `src/svg/`. For icon naming try to follow [Font Awesome](http://fontawesome.io) naming practices.
Compile svg sprite file.
```
grunt dev
```
View the test page on your browser in http://localhost:9090
## Further reading
- [Florens Verschelde: How to work with SVG icons](https://fvsch.com/code/svg-icons/how-to/)