A react library to create accessible svg icon sets
With npm Make sure you have npm installed and then run
$ npm install meeseeks-icons
Then in your code
import React from 'react';
import ReactDom from 'react-dom';
import { Icon } from 'meeseeks-icons';
const app => (props) => (
<div>
<Icon icon={'cloud'} />
</div>
);
ReactDom.render(
<App ...props />,
document.getElementById('app')
);
props name | props type | default | description |
---|---|---|---|
description | {string} | the description of the icon, what it represents, visually or symbolically | |
title | {string} | the title of your icon | |
icon | {string} required | the name of the icon you can to display. It must match one of the default icons name, or exist in the provided iconset | |
fill | {string} | #fff | base color for your icon |
focus | {string} | focus effect you want to add to your icon (for when selected with tab key for example). you can choose between three styles or leave empty for default behavior (has an outline like buttons and links). | |
hover => has the same styling as :hover state | |||
bounce => adds a bouncy effect | |||
none => remove any visual effects (outline included) | |||
iconset | {object} | fat icons set | you can specify a new set of svg icons to choose from. TODO: // SHOW EXAMPLE OF ICON SET |
height | {string/int} | 50 | height of the icon (in pixels if not specified) |
width | {string/int} | 50 | width of the icon (in pixel if not specified) |
role | {string} | 'icon' | role attribute of the icon |
First fork the project and clone it
$ git clone git@github.com:{your-username}/meeseeks-icons.git
$ cd meeseeks-icons
$ npm install
Source files are inside the src/ folder. Too start a dev server, simply run:
$ npm run dev
This will start a webpack dev server on http://localhost:8080 with sourcemaps enabled. It watches for change and reloads on save.
- dev - start webpack dev server
- lint - start both lint:js and lint:css
- lint:js - lint your js code with eslint using airbnb default ES6/React config and ava config for test files
- lint:css - lint your css code (using postcss with precss [sass like features] and cssnext plugins, so yeah, CSS4 features)
- test - run the test using ava
- test:watch - watches for changes and relaunch tests
- build - run all the scripts needed to build the library
- cover - run code coverage on tests
- check-coverage - check if code coverage is within accepted limit
- report-coverage - send coverage report to codecov.io
- commit - used to commit with commitizen and preformated commit message
Never run $ git commit
manually, use this workflow instead
$ git add -A
$ npm run commit
// go through commitizen wizard
$ git push origin your-branch
Whenever you commit, please follow semver conventions and cz-conventional-changelog plugin for commitizen
Then you can create a pull request on this repository
All the updates to npm are automated by semantic-release
- Finish adding SVG icons
- Readme
- Installation
- Test
- Contribute
Thanks to Carlos Pariente A. for his Fat Icons set, used in this project as base icon set.