Next.js Discord

Discord Forum

implement an iconfont

Unanswered
Sweat bee posted this in #help-forum
Open in Discord
Sweat beeOP
Can anyone explain how to add a local iconfont into my next project using app router?

I was following the usual approach to add local fonts via root layout. 

const iconFont = localFont({
  src: '../../../public/icons/ico-dgl-br.woff2',
  variable: '--font-dgl-icons',
});


<html
      lang="de"
      className={`${iconFont.variable}`}
    >
...


I also added the font variable to my tailwind config:

extend: {
      fontFamily: {
        'dgl-icons': ['var(--font-dgl-icons)'],
      },
...


I build a wrapper Icon component:

function Icon(props: any) {
  return <i className={`${props.icon} ${props.className}`} />;
}

export default Icon;

I added the component to my page:

  <Icon icon="dgl--icon-house" className={'dgl--icon'} />

Unfort. nothing is being displayed!

0 Replies