Skip to main content

Adding an SVG icon

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 client/src/styling/icons.js.

It should look like this:

client/src/styling/icons.js

import React from 'react';
import ArrowBack from 'boxicons/svg/regular/bx-arrow-back.svg';
...
import Logo from '../assets/logo.svg';

export const icons = {
  logo: {
    icon: New,
    size: 'sm'
  },
  arrowBack: { icon: ArrowBack },
  ...
};

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 yarn or npm .

npm install boxicons --save

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.

client/src/styling/theme.js

...
import { icons } from './icons';
export const yourThemeName = createTheme({
  ...
  icons
})

2. Import your icon​

First you need to get the SVG you want to add.

Here's one you can use...

<?xml version="1.0" encoding="UTF-8"?>
<svg width="64" height="64" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Deity Logo</title>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M32,0 L39.58,4.332 L39.5803807,16.5261841 L32.0612341,12.2982533 L14.9769148,22.0721748 L14.9769148,41.6200179 L32.0561191,51.3939394 L49.1455534,41.6200179 L49.145,9.798 L60,16 L60,48 L32,64 L4,48 L4,16 L32,0 Z M32.1811377,23.3939394 L39.5930308,27.6060606 L39.5930308,36.030303 L32.186267,40.2424242 L24.7743739,36.030303 L24.7743739,27.6060606 L32.1811377,23.3939394 Z" fill="#A0CC3F"></path>
    </g>
</svg>

One 'gotcha' is that some SVGs don't camel case viewBox e.g. viewbox. This will cause issues so it's best to change it to viewBox.

Add your svg file to your assets directory (client/src/img/opensource/new-icon.svg) and import it in the icon component (client/src/styling/icons.js).

client/src/styling/icons.js

...
import NewIcon from '../img/opensource/new-icon.svg';

export const icons = {
  ...
  newIcon: { icon: NewIcon },
  ...
};

Using a component as an icon
It's also possible to use images as icons, or any other component.
...
export const icons = {
    ...
    newIcon:  {
        icon: props => <img {...}/>,
        stroke: 'none'
    }
    ...
}

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.

client/src/components/YourComponent.js

...
import { Box, Icon } from '@deity/falcon-ui';
...

const YourComponent = () => (
  <Box>
      <Icon src="newIcon" />
  </Box>
);

src should be the key defined in your client/src/styling/icons.js file.

<Icon> is themeable so you can pass css like any other component.

client/src/components/YourComponent.js

...
const YourComponent = () => (
  <Box>
      <Icon src="newIcon" css={{fill: 'red'}} />
  </Box>
);

4. Done​

That's it, you've added a new icon.