To get more information on how icons work in Falcon Client read this doc.
1. Create an icon component
Using the new theme?
If you're using the new theme you'll have this already and can skip this step.
Let's create the file
It should look like this:
You'll notice in this example that one of the icons is imported from Boxicons.
If you're not using the new theme and want to use Boxicons you can do so by adding it as a dependency using
We now need to pass the
icons to our theme. In your
theme.js file you can pass it to the object in
createTheme. It can be that icons is already defined, in that case you want to simply replace it.
2. Import your icon
First you need to get the SVG you want to add.
Here's one you can use...
One 'gotcha' is that some SVGs don't camel case
viewbox. This will cause issues so it's best to change it to
Add your svg file to your assets directory (
client/src/img/opensource/new-icon.svg) and import it in the icon component (
3. Use your icon
The last step is actually using your icon. Open up the component you want to add it to, import it and let it know which icon to display.
src should be the key defined in your
<Icon> is themeable so you can pass css like any other component.
That's it, you've added a new icon.