moblee-icons

mobLee-icons

Usage

Install

yarn add moblee-icons

Import

import MenuIcon from 'moblee-icons/Menu';

Render

<Menu />

Creating a new icon

Suppose your icon is going to be called myIcon.

• Get the SVG file for your custom icon and make sure it measures 24x24px;
• Inside src create a new file myIcon.js;
• As a template, copy the content of src/Pin.js to your new file and replace all instances of Pin to myIcon;
• Open the your SVG file using a text editor and look for the <path> tag, copy the content of it's d attribute. This string describes de shape of the icon;
• Inside myIcon.js replace d content with the string you copied from the original SVG;
• ⚠️ You will probably need to break lines inside d, to do so, follow this rule: Enter new lines before letters, commas or spaces (a-Z, , or ), NEVER split numbers and dots (0-9 and .). Pin.js is a good example;
• Open src/index.js and add the export: export { default as myIcon } from './myIcon';. Then sort lines (on Atom use: ⌘+⇧+P > "Sort Lines: Sort");
• Lastly, to update the storybook open stories/mobleeIcons.js and add 'myIcon', to the array. (in alphabetical order!)

That's it!! 🎉

You can now check out your brand new icon on the storybook! 😃

Contribute

• Clone the repo: git clone [e-mail]:mobLee/icons
• Cd into the directory: cd icons
• Install the dependencies: yarn
• Open a new branch: git checkout -b feature-nyan-cat
• Develop using the storybook: yarn storybook
• Commit your changes: git add -A . && git commit -m "Add NyanCat icon"
• Create a merge request

Publish a new version

• On master branch: git checkout master
• Pull the changes: git pull
• Update package.json version
• Commit the new version: git commit -am "vX.X.X"
• Run the deploy script using NPM: npm run deploy
• Tag the version: git tag vX.X.X
• Push your changes: git push && git push --tags