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.

1. Get the SVG file for your custom icon and make sure it measures 24x24px;
2. Inside src create a new file myIcon.js;
3. As a template, copy the content of src/Pin.js to your new file and replace all instances of Pin to myIcon;
4. 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;
5. Inside myIcon.js replace d content with the string you copied from the original SVG;
6. ⚠️ 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;
7. Open src/index.js and add the export: export { default as myIcon } from './myIcon';. Then sort lines (on Atom use: ⌘+⇧+P > "Sort Lines: Sort");
8. 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

1. Clone the repo: git clone [email protected]:mobLee/icons
2. Cd into the directory: cd icons
3. Install the dependencies: yarn
4. Open a new branch: git checkout -b feature-nyan-cat
5. Develop using the storybook: yarn storybook
6. Commit your changes: git add -A . && git commit -m "Add NyanCat icon"
7. Create a merge request

Publish a new version

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