To get more information on how icons work in Falcon Client read this doc.
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.
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 (
Using a component as an iconIt's also possible to use images as icons, or any other component.
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.