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: @ModaOperandi/ecommerce-squad
npm install --save @moda/icons
Visit: https://moda-om-icons.netlify.app/ 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#main
.
-Netlify deploy config is located here: https://github.com/ModaOperandi/icons/blob/main/netlify.toml
-Netlify site overview: https://app.netlify.com/sites/moda-icons/overview
(settings specified in netlify.toml override any corresponding settings in the Netlify UI)