Pretty Interaction Icons
This is my attempt to create a npm package containing interaction icons that look cool w mo.js
npm install pretty-interaction-icons
Inspired by this Medium post
Credit to Codrops + Ohans Emmanuel
Table of Content
PropTypes & Default Props HERE
Colors
Used palette from Marvel (Working on letting users specify hex as props)
// light shadeswhite: "#FFFFFF"snow: "#F9FAFC"darkSnow: "#EFF2F7"extraDarkSnow: "#E5E9F2"// dark tonessilver: "#8492A6"slate: "#3C4858"steel: "#273444"black: "#1F2D3D"// dark shadessmoke: "#E0E6ED"darkSmoke: "#D3DCE6"extraDarkSmoke: "#C0CCDA"// blue shadeslightBlue: "#85D7FF"blue: "#1FB6FF"darkBlue: "#009EEB"// purple shadeslightPurple: "#A389F4"purple: "#7E5BEF"darkPurple: "#592DEA"// pink shadeslightPink: "#FF7CE5"pink: "#FF49DB"darkPink: "#FF16D1"// orange shadeslightOrange: "#FF9E7C"orange: "#FF7849"darkOrange: "#FF5216"// green shadeslightGreen: "#29EB7F"green: "#13CE66"darkGreen: "#0F9F4F"// yellow shadeslightYellow: "#FFD55F"yellow: "#FFC82C"darkYellow: "#F8B700"// ui colorsinfo: "#1FB6FF"success: "#13CE66"danger: "#FF4949"warning: "#FFC82C"
Examples
;
MediumClap
<MediumClap size="medium" color="darkGreen" labelColor="darkGreen" clapCount=0 clapCountTotal=10/>
Like
<Like hasBurst hasRing hasShrink ringColor="purple" burstStrokeColor="blue" burstRadius="large" burstShape="line" ringRadius="extraLarge" burstCount=5 burstOpacity=05 ringOpacity=05 size="large" labelContent=10 labelPosition="bottom"/>
Music
<Music hasNotes hasRock color="blue" noteColors="danger" "warning" "darkGreen" "warning"/>
Heart
<Heart size="large" color="danger" ringColor="green" ringSize="extraLarge" hasShrink hasRings labelContent=10 labelPosition="top"/>
Development
clone the component-lib-playground + this repo
git clone https://github.com/hungweiwu/pretty-interaction-icons
git clone https://github.com/hungweiwu/component-lib-playground
Setup
Link the pretty-interaction-icons
package to global npm node modules folder
cd pretty-interaction-icons && npm link
Link in the playground
cd component-lib-playground && npm link pretty-interaction-icon
and now you can do
;
this inside App.js
in the component-lib-playground
Running
inside pretty-interaction-icons root directory run
npm run build:watch
npm run lint:watch
for live linting and re-transpiling
inside component-lib-playground root directory run
npm run dev
It will serve a React app on localhost:8080
HAPPY DEVELOPING :)