js-pretty-icons

JS Pretty Icons is a component library with a lot of beautiful and customizable icons, all of them from SVGRepo website.

NPM Package: js-pretty-icons - npm

Installation

npm install js-pretty-icons

Usage

Recommended Usage

You can import a PrettyIcon Component from "js-pretty-icons" library as a default import.

import PrettyIcons from "js-pretty-icons";

// Without custom width, height, color and className
return <PrettyIcons icon="chevron-down" />;

// With custom width, height, color and className
return (
  <PrettyIcons
    icon="chevron-up"
    width={32}
    height={32}
    color="#FF0000"
    className="custom-class-chevron-down"
  />
);

Other Usage

You can import the specific Icon Component from "js-pretty-icons" library as a non-default import.

import { ChevronDownIcon } from "js-pretty-icons";

// Without custom width, height, color and className
return <ChevronDownIcon />;

// With custom width, height, color and className
return (
  <ChevronDownIcon
    width={32}
    height={32}
    color="#FF0000"
    className="custom-class-chevron-down"
  />
);

Props

Prop	Tipo	Descrição	Obrigatório
icon	string	Icon to be showed.	Sim
width	number	Icon width in pixels (default: 32px).	Não
height	number	Icon height in pixels (default: 32px).	Não
color	string	Icon color (default: "#000000").	Não
className	string	Icon className (always includes {icon-name}-icon classes, i.e. chevron-down-icon).	Não

Available Icons

Name Icon alarm alarm-variant-1 anchor-link arrow-down arrow-left arrow-right arrow-up bag bag-variant-1 bag-variant-2 bell bell-slash bell-slash-variant-1 bell-variant-1 bell-variant-2 bookmark calendar calendar-variant-1 camera camera-slash camera-variant-1 camera-variant-2 camera-variant-3 camera-variant-4 cart cart-variant-1 cart-variant-2 chat chat-check chat-close chat-dots-horizontal chat-exclamation chat-info chat-question check check-circle chevron-down chevron-left chevron-right chevron-up clock clock-variant-1 clock-variant-2 close cloud-download cloud-download-variant-1	Name Icon copy copy-variant-1 document document-variant-1 document-variant-2 dots-horizontal dots-vertical double-chevron-down double-chevron-left double-chevron-right double-chevron-up download download-variant-1 download-variant-2 edit-image exclamation-mark eye eye-closed eye-slash eye-slash-variant-1 eye-variant-1 facebook filter filter-variant-1 folder folder-variant-1 folder-variant-2 half-heart half-heart-filled half-star half-star-filled heart heart-filled home home-variant-1 image image-check image-close image-minus image-plus image-variant-1 info instagram instagram-old location location-variant-1	Name Icon mail mail-open mail-variant-1 menu messenger minus minus-circle mobile-phone mobile-phone-variant-1 pause pencil pencil-variant-1 pencil-variant-2 phone phone-variant-1 play play-pause plus-circle plus plus-minus profile profile-variant-1 question-mark refresh refresh-variant-1 save save-variant-1 save-variant-2 search send send-variant-1 send-variant-2 send-variant-3 send-variant-4 settings settings-variant-1 star star-filled trash trash-variant-1 twitter upload upload-variant-1 upload-variant-2 whatsapp

All icons are sourced from SVG Repo and you can find the icon page on the icon file inside assets folder.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT