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.