docusauruscommunity / website Goto Github PK

Motivation

Since search is unavailable, introducing https://github.com/easyops-cn/docusaurus-search-local should quickly enhance the developer experience.

hi it is possible to use @expo/vector-icons?

I ma using createIconSetFromIcoMoon from @expo/vector-icons

import { createIconSetFromIcoMoon } from '@expo/vector-icons';

export default createIconSetFromIcoMoon(
require('./icon-settings.json'),
'Icons',
'icons.ttf'
);
I am using those icons on custom buttons and I got the fallowing error:

ERROR
Font.isLoaded is not a function
TypeError: Font.isLoaded is not a function
at new Icon (webpack-internal:///./node_modules/@expo/vector-icons/build/createIconSet.js:1:2751)
at constructClassInstance (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:12716:18)
at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17425:5)
at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19073:16)
at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23959:7)
at performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22774:12)
at workLoopSync (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22702:5)

Can you provide a detailed tutorial? I am new to use react. Thank you so much

More convenient to use in components than using MDXComponents

Creat file src/components/Icon/index.ts

import React from 'react'
import { Icon } from '@iconify/react'

export function ICON ({ children }: { children: string }) {
  return (
    <span>
        <Icon icon={children} height="24" style={{verticalAlign: "-0.35em"}}></Icon>
    </span>
  )
}

Use in markdown

import { ICON } from '@site/src/components/Icon';
<ICON>mdi:github</ICON>