Been here before? Visit the click-to-copy documentation. First time? Keep reading.
This is a build pipeline for dealing with and packaging SVG icons into React components. It optimizes SVGs using SVGO, then publishes a package @moda/icons which exports each individual icon as a component. By copying the import out of the click-to-copy documentation you ensure you import only the icons you need.
- State: production
- Point people: @jmcriffey
npm install --save @moda/iconsVisit: https://moda-icons.netlify.com and click the desired icon to copy its import statement.
import ShoppingBagIcon from "@moda/icons/shopping-bag-24";
// Use it as a normal React component
const Foo = () => (
<>
Checkout whats in my <ShoppingBagIcon />
</>
);By default all icons are sized according to their native dimensions. So the example above: shopping-bag-24, would be 24×24px by default. This can be overridden by passing in width and height props:
<ShoppingBagIcon width="2em" height="2em" />Color is set using the currentcolor prop so icons are the same color as their parent div. This provides a simple way to change the fill color.
.ParentContainer {
color: black;
&:hover {
color: red;
}
}Alternatively this can be set using a prop:
<ShoppingBagIcon color="#f00" />The SVG you wish to add must be outlined.
Once you have an SVG you want to add, simply import it to src/svg using the naming convention of snake-cased name followed by the desired native size: Arrow_Down_12.svg.
We are using semantic release for this repo and commitizen to help with formatting commits.
- Install the commitizen CLI with
npm install -g commitizen - To run through the CLI: stage your files to commit and run
git cz.
A full listing of available icons, grouped by size, with a simple filtering interface can be viewed here.
npm run local:preview
# ...
# => http://localhost:3000/To unlink the local version of the library:
npm run local:restore
Documentation is rebuilt and republished whenever there is a merge to ModaOperandi/icons#master.