https://github.com/evil-icons/evil-icons
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN
https://github.com/evil-icons/evil-icons
evil-icons icons javascript ruby svg svg-icons
Last synced: about 1 month ago
JSON representation
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN
- Host: GitHub
- URL: https://github.com/evil-icons/evil-icons
- Owner: evil-icons
- License: mit
- Created: 2014-10-30T14:54:58.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2021-10-19T14:41:11.000Z (over 4 years ago)
- Last Synced: 2025-11-24T02:17:29.717Z (2 months ago)
- Topics: evil-icons, icons, javascript, ruby, svg, svg-icons
- Language: JavaScript
- Homepage: http://evil-icons.io
- Size: 26.3 MB
- Stars: 5,034
- Watchers: 111
- Forks: 218
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-ru - Evil Icons - Набор SVG иконок с поддержкой Rails, Sinatra, React и других платформ. Автор: Александр Мадянкин. (Инструменты разработчика)
- Open-Source-Ruby-and-Rails-Apps - evil-icons - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN 🔥 ✅ 🚀 (Happy Exploring 🤘)
- awesome-starred - evil-icons/evil-icons - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN (javascript)
- awesome-icons - Evil icons - Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN. ([Website](http://evil-icons.io)) (General)
- awesome-icons - Evil Icons - Free ‘plug and play’ set of SVG icons designed specifically for web projects (Generic)
README
Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Ruby gem, a Node.js package and
/Gulp plugins. Just use icon names with your templates and styles — and all the rest will be done automagically.
[evil-icons.io](http://evil-icons.io)
Made by [Alexander Madyankin] and [Roman Shamin].
[Alexander Madyankin]: https://twitter.com/madyankin
[Roman Shamin]: https://twitter.com/romanshamin
## Usage
* [Supported browsers](#supported-browsers)
* [Grunt](#grunt)
* [Gulp](#gulp)
* [CDN](#cdn)
* [Rails](#rails)
* [Sinatra](#sinatra)
* [Middleman](#middleman)
* [npm](#npm)
* [React](#react)
* [Styling](#styling)
### Supported browsers
We support IE 9+, Firefox, Chrome, Safari (desktop and mobile), Opera, Android 4+.
http://caniuse.com/#search=inline%20svg
### Grunt
Use the [Grunt plugin](https://github.com/evil-icons/grunt-evil-icons)
### Gulp
Use the [Gulp plugin](https://github.com/evil-icons/gulp-evil-icons)
### CDN
Just include the assets into your page from CDN:
```html
```
And use the icons like this:
```html
```
### Rails
Add the `'evil_icons'` gem to your Gemfile:
```ruby
gem 'evil_icons'
```
Add the Evil Icons require to your `application.css`:
```css
/*
*= require evil-icons
*/
```
Next, you have to render the evil-icons sprite in your template (or, in your layout):
```erb
<%= evil_icons_sprite %>
```
Finally, you can render the icon using the `evil_icon` helper.
Here are some examples:
```erb
<%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %>
```
### Sinatra
Add the `'evil_icons'` gem to your Gemfile:
```ruby
gem 'evil_icons'
```
And require it:
```
require 'evil_icons'
```
Add the helpers to your application:
```ruby
helpers EvilIcons::Helpers
```
Next, you have to render the evil-icons sprite in your template (or, in your layout):
```erb
<%= evil_icons_sprite %>
```
Finally, you can render the icon using the `evil_icon` helper.
Here are some examples:
```erb
<%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %>
```
In order to use the stylesheets, you have to add Sprockets to your application.
Add `sinatra-asset-pipeline` to your Gemfile:
```ruby
gem 'sinatra-asset-pipeline'
```
And register it:
```ruby
require 'sinatra/asset_pipeline'
register Sinatra::AssetPipeline
```
Finally, add the Evil Icons require to your `application.css`:
```css
/*
*= require evil-icons
*/
```
Also, you can take a look at [example app](https://github.com/aderyabin/evil_icons_sinatra_example/) by [@aderyabin](https://github.com/aderyabin).
### Middleman
Add the `'evil_icons'` gem to your Gemfile:
```ruby
gem 'evil_icons'
```
Add the Evil Icons require to your main css file eg.
`source/stylesheets/styles.css``:
```css
/*
*= require evil-icons
*/
```
Add following to your `config.rb` to register Evil Icons helpers:
```ruby
require 'evil_icons'
helpers EvilIcons::Helpers
after_configuration do
sprockets.append_path(EvilIcons.assets_dir)
end
```
Next, you have to render evil-icons sprite in your layout similar to the
[Rails usage](#rails):
```erb
<%= evil_icons_sprite %>
```
And finally `evil_icon` helper renders icons just like with the [Rails](#rails):
```erb
<%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %>
```
## npm
Add the `'evil-icons'` package to your project:
```bash
npm install evil-icons
```
Add the Evil Icons styles to your pages:
```html
```
Require `evil-icons` in your JavaScript code:
```js
var icons = require("evil-icons")
```
Finally, you can render the icons in your page using helpers.
Here are some examples:
```js
/* A string with SVG sprite */
icons.sprite;
/* Icons rendering */
icons.icon("ei-search");
icons.icon("ei-arrow-right", {size: "m"});
icons.icon("ei-envelope", {size: "l", class: "custom-class"});
```
### React
Use the [React component](https://github.com/saulhoward/react-evil-icons).
### Styling
Every icon has the `.icon` class and its modifier including the icon name. For example, the Facebook icon has the `.icon--ei-sc-facebook` modifier.
Also, an icon may have a size modifier. But we do recommend to change the size using helper's `size` parameter instead. Evil Icons have some predefined sizes: `s` (25x25, default), `m` (50×50), `l` (100×100), `xl` (150×150) and `xxl` (200×200). You may want to add more sizes, we recommend keeping the sizes multiple to 25.
```js
icons.icon("ei-arrow-right", {size: "m"})
```
Also, you may want to add a custom class for an icon.
You can do this using the `class` parameter:
```js
icons.icon("ei-envelope", {class: "custom-class"})
```
An icon's color can be changed in CSS:
```css
.icon {
fill: green;
}
.icon--ei-sc-facebook {
fill: blue;
}
```
## Roadmap
* Custom icons
* More styles