Icons

Add custom icons to your theme.

Reflexjs includes the Feather Icons collection in the base theme. You can extend this and add your own icons or completely replace Feather Icons.

Step 1: Shadow icons.js

Create the following file src/@reflexjs/gatsby-theme-base/icons.js.

import feather from "@reflexjs/icons-feather"
export default {
  ...feather, 
  // This is where you will add your custom icons library.
}

Step 2: Add icon svg

Copy your icon svg and add it to icons.js.

export default {
  cat: `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">...</svg>`,
}

You can now use your custom icon anywhere on your site.

<Icon name="cat" />

You can use style props to change the color, size and style of Icon.

<Icon name="cat" />
<Icon name="cat" size="10|20|40" color="accent" />