Fyndiq-icons NPM

fyndiq-icons

A set of icons for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-icons

Usage

To see the name of the icons in the set, please visit the demo

import React from 'react'
import { Pencil, Checkmark } from 'fyndiq-icons'

// Normal usage
<Checkmark />

// Change the color
import colors from 'fyndiq-style-colors'
<Pencil color={colors.blue} />

To change the color of the Icon in CSS, do the following:

/*
  It is important to always set both the fill
  and stroke to a specified color.
*/
.myIcon {
  fill: red;
  stroke: red;
}

import { Magnifier } from 'fyndiq-icons'

<Magnifier className="myIcon" />

API

All icons have the following props:

Name	Type	Description	Default value
className	String	An optional classname to put on the root SVG	`''`
color	String	Set the color of the icon in SVG

Additionnaly, some icons provide special props:

Arrow

Name	Type	Description	Default value
orientation	String	Specifies the orientation of the arrow. One of `up`, `down`, `right` or `left`	`left`

Star

Name	Type	Description	Default value
full	Number	Describes how "full" the star is. Usefull to show half-stars. 1 is full, 0 is empty.	`1` (full)
color	String	In the case of the star, this attribute corresponds to the color of the full part of the star.
colorEmpty	String	Color of the empty part of the star

Developpment info

Add a new icon

To add a new icon to fyndiq-icons, you need to first clean it up, using Inkscape/Illustrator and optimize it using SVGOMG.

Then, use the following template for your new file

import React from 'react'
import PropTypes from 'prop-types'

import SvgWrapper from './svg-wrapper'

/* Rename NewIcon to something more specific */
const NewIcon = ({ className, color }) => (
  <SvgWrapper className={className} viewBox="*** YOUR ICON'S VIEWBOX HERE ***">
    {/* Content of the SVG*/}
  </SvgWrapper>
)

NewIcon.propTypes = SvgWrapper.propTypes
NewIcon.defaultProps = SvgWrapper.defaultProps

export default NewIcon

The part {/* Content of the SVG*/} should represent the different <path>s of your SVG. Each of them should have a prop fill or stroke set to {color}, and the other one set to none. This is very important and enables both CSS and JS coloring.