GithubHelp home page GithubHelp logo

wh0197m / eva-icons Goto Github PK

View Code? Open in Web Editor NEW

This project forked from akveo/eva-icons

0.0 1.0 0.0 27.25 MB

A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Home Page: https://akveo.github.io/eva-icons/

License: MIT License

TypeScript 47.12% CSS 23.31% JavaScript 19.92% HTML 9.66%

eva-icons's Introduction

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally Eva Icons supports 4 animation types: zoom, pulse, shake and flip. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: Fill and Outline and in serveral formats, including PNG, SVG, font, Sketch, etc.

Download

CDN

Load from CDN in your project:

<script src="https://unpkg.com/eva-icons"></script>

After including the script, eva will be available as a global variable.

NPM

  • Install the package:
npm i eva-icons
  • Include it to your page:
<script src="path/to/dist/eva-icons.js"></script>
  • Or require the package (may vary depending on your build system):
const eva = require('eva-icons');
import * as eva from 'eva-icons';

How to use

JavaScript

  • Add the data-eva attribute with the icon name to an element:
<i data-eva="github"></i>
  • Call eva.replace(); to replace all elements with the data-eva data attribute with SVG elements. You can also pass some additional parameters to the replace method to modify the replace function behavior.
<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/eva-icons"></script>
  <body>
  
    <i data-eva="github"></i>

    <script>
      eva.replace()
    </script>
  </body>
</html>

Thanks to Feather Icons for the build process inspiration.

Fonts

Eva Icons are also available as a Web Font.

  • Include the font css into your page:
<link href="path/to/style/eva-icons.css">
  • Add eva and eva-icon classes to an element:
<i class="eva eva-github"></i>

We recommend using SVG icons due to better rendering and performance capabilities, more details.

Documentation

eva.replace({ ... })

Replaces all elements that have a data-eva attribute with SVG markup corresponding to the element's data-eva attribute value.

License

MIT license.

More from Akveo

  • Nebular - Angular Component, Auth and Security
  • ngx-admin - the best Angular admin template

How can I support the developers?

  • Star our GitHub repo โญ
  • Create pull requests, submit bugs, suggest new features or documentation updates ๐Ÿ”ง
  • Follow us on Twitter ๐Ÿพ
  • Like our page on Facebook ๐Ÿ‘

From Developers

Made with โค๏ธ by Akveo team. Follow us on Twitter to get the latest news first! We're always happy to receive your feedback!

eva-icons's People

Contributors

denstrigo avatar nnixaa avatar akveo-private avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.