在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):evil-icons/evil-icons开源软件地址(OpenSource Url):https://github.com/evil-icons/evil-icons开源编程语言(OpenSource Language):JavaScript 47.7%开源软件介绍(OpenSource Introduction):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. Made by Alexander Madyankin and Roman Shamin. UsageSupported browsersWe support IE 9+, Firefox, Chrome, Safari (desktop and mobile), Opera, Android 4+. http://caniuse.com/#search=inline%20svg GruntUse the Grunt plugin GulpUse the Gulp plugin CDNJust include the assets into your page from CDN: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/assets/evil-icons.min.js"></script> And use the icons like this: <div data-icon="ei-archive"></div>
<div data-icon="ei-chart" data-size="s"></div>
<div data-icon="ei-check" data-size="m"></div>
<div data-icon="ei-spinner" data-size="m"></div>
<div data-icon="ei-cart" data-size="l" class="foo"></div> RailsAdd the gem 'evil_icons' Add the Evil Icons require to your /*
*= require evil-icons
*/ Next, you have to render the evil-icons sprite in your template (or, in your layout): <%= evil_icons_sprite %> Finally, you can render the icon using the <%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %> SinatraAdd the gem 'evil_icons' And require it:
Add the helpers to your application: helpers EvilIcons::Helpers Next, you have to render the evil-icons sprite in your template (or, in your layout): <%= evil_icons_sprite %> Finally, you can render the icon using the <%= 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 gem 'sinatra-asset-pipeline' And register it: require 'sinatra/asset_pipeline'
register Sinatra::AssetPipeline Finally, add the Evil Icons require to your /*
*= require evil-icons
*/ Also, you can take a look at example app by @aderyabin. MiddlemanAdd the 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 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: <%= evil_icons_sprite %> And finally <%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %> npmAdd the npm install evil-icons Add the Evil Icons styles to your pages: <link rel="stylesheet" type="text/css" href="./node_modules/evil-icons/assets/evil-icons.css"> Require var icons = require("evil-icons") Finally, you can render the icons in your page using helpers. Here are some examples: /* 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"}); ReactUse the React component. StylingEvery icon has the Also, an icon may have a size modifier. But we do recommend to change the size using helper's 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 icons.icon("ei-envelope", {class: "custom-class"}) An icon's color can be changed in CSS: .icon {
fill: green;
}
.icon--ei-sc-facebook {
fill: blue;
} Roadmap
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论