Need help with evil-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

evil-icons
4.9K Stars 228 Forks MIT License 235 Commits 26 Opened issues

Description

Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN

Services available

!
?

Need anything else?

Contributors list

Circle CI

Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Ruby gem, a Node.js package and Grunt/Gulp plugins. Just use icon names with your templates and styles — and all the rest will be done automagically.

evil-icons.io

Made by Alexander Madyankin and Roman Shamin.

Sponsored by Evil Martians

Usage

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

Gulp

Use the Gulp plugin

CDN

Just include the assets into your page from CDN:


And use the icons like this:

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

Finally, you can render the icon using the

evil_icon
helper. Here are some examples:
erb



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

Finally, you can render the icon using the

evil_icon
helper. Here are some examples:
erb



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 by @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
`:
/*
 *= require evil-icons
 */

Add following to your

config.rb
to register Evil Icons helpers:
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:


And finally

evil_icon
helper renders icons just like with the Rails:

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.

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.