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/iconsVisit: https://moda-icons.netlify.app/ and click the desired icon to copy its import statement.
importShoppingBagIconfrom"@moda/icons/shopping-bag-24";// Use it as a normal React componentconstFoo=()=>(<>
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:
<ShoppingBagIconwidth="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:
<ShoppingBagIconcolor="#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)