Meeseeks-icons NPM

Meeseeks Icons

A react library to create accessible svg icon sets

How to use it

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')
);

API

Icon

Props

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

CONTRIBUTING

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.

Available scripts

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

TODO

Finish adding SVG icons
Readme
Installation
Test
Contribute

Thanks

Thanks to Carlos Pariente A. for his Fat Icons set, used in this project as base icon set.

IMPORTANT: WIP

icons react accessible meeseeks can do

react

@everything-registry/sub-chunk-2151 @infinitebrahmanuniverse/nolb-mee

8 years ago

8 years ago

8 years ago

8 years ago