Skip to main content
Version: current

Site Icons

Falcon Client comes with an Icon component @deity/falcon-ui. This component expects you to have icons set in your theme.

client/src/styling/theme.js

...
export const yourThemeName = createTheme({
...
icons: {}
})

If you're using the demo-v2 example, you'll see a client/src/styling/icons.js file. This is imported into your theme.

client/src/styling/theme.js

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

client/src/styling/icons.js

...
import Icon from '..//img/opensource/icon.svg';
export const icons = {
...
newIcon: { icon: NewIcon },
...
};

The client/src/styling/icons.js component exports and object with each icon included. We have the boxicons package included so you have access to all these icons right from the start.

client/src/styling/icons.js

import User from 'boxicons/svg/regular/bx-user.svg';
import Logo from '..//img/opensource/logo.svg';
export const icons = {
logo: {
icon: Logo,
size: 'sm'
},
account: { icon: User },
...
};

You can also add your SVG directly into the icon component rather than importing it.

client/src/styling/icons.js

...
export const icons = {
...
loader: {
icon: props => (
<svg viewBox="0 0 50 50" {...props}>
<path
d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"
transform="rotate(241.969 25 25)"
>
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.8s"
repeatCount="indefinite"
/>
</path>
</svg>
)
}
};

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.

Stay up to date

Do you want to be informed when we release new features or fixes? Sign up to our newsletter to stay in the loop.