base5-icons v2.3.2
base5 icons
5app's SVG icons as React components, powered by styled-components.
WARNING
This repo is deprecated and has been merged into the base5-ui repository.
Installation
npm i --save base5-icons styled-components
Usage
import React from 'react';
import Star from 'base5-icons/Star';
class Message extends React.Component {
render() {
return (
<div>
You're a <Star />!
</div>
);
}
}
Props
scale
Number. By default, icons are sized at 1em
, scaling along with their surrounding text. The scale
prop lets you define a scaling factor to size the icon, i.e. a value of 2
will make the icon twice as large.
color
String. By default, icons use the colour of their containing element (currentcolor
). You can change this to any valid color value here.
vAlign
Boolean. When placed next to or inside of text, square icons tend to sit a bit too low compared to the text's baseline. Use the vAlign
flag to nudge the icon up by a few pixels to visually align it with its surrounding text.
Example: <Star vAlign /> Favourite
spacingLeft
& spacingRight
String. Add some left or right margin to the icon. Accepts any valid CSS length value, a unit must be included.
Adding new icons
- Add new SVG icons to src/svg
- Add any new icons as an export inside of src/js/index.js
- Define a
string
name for any new icons in the icon map in src/js/iconMap.js
Once that's done, run npm run build
to convert the SVGs to standalone React components inside of src/js. In the same step, they will then be compiled to a new dist
folder as standard ES5 JS modules.
Updating the repo
- Bump the version number using
npm version [patch|minor|major]
- Run
npm run dist
to publish thedist
folder to NPM
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago