Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: 3 months ago
JSON representation

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

Lists

README

        

![](http://evil-icons.io/assets/images/evil-icons.png)

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].


Sponsored by Evil Martians

[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