を使用してインポートするアイコンのラッパー コンポーネントを作成していますreact-icons。現在の外観の例を次に示します。
import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements
<Icon>
<Twitter />
<Icon>
さて、これは思い通りに動作しますが、コードを単純化したいと思います。理想的には、次のように表示/動作することを望みます:
<Icon name='twitter' />
これを行う方法はありますか？
注: 参考Iconまでに、私のコンポーネントの現在のコードは次のとおりです。
export const Icon = props => <IconBase {...props} />
コンポーネントはの<IconBase>スタイルの一部ですstyled-components。
アップデート
Twitter の例は単なる例であることに注意してください。コンポーネントに渡す名前に関係なく機能するソリューションを探してい<Icon>ます。つまり、次のすべて (およびそれ以上) が機能します。
<Icon name="Facebook" />
<Icon name="Search" />
<Icon name="Menu" />
これらはそれぞれ次と同等です。
<Icon><Facebook /></Icon>
<Icon><Search /></Icon>
<Icon><Menu /></Icon>
つまり、 からどのアイコンを取得しても、プロップreact-iconsに対して適切にレンダリングされます。name