evil-icons

by evil-icons

evil-icons / evil-icons

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

4.9K Stars 223 Forks Last release: over 2 years ago (1.10.1) MIT License 235 Commits 21 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.