可以将自定义图标添加到 font-awesome-react 中吗

Question

React-font-awesome存储库上的这个问题表明这至少是可能的，但没有概述添加自定义 SVG 图标所需的内容。

React Font Awesome 允许您从库中添加图标，但只能从它们自己的库中添加。

有没有办法创建自己的图标库并添加它？

我为什么要这样做？因为react-font-awesome围绕其组件构建了许多有用的功能<FontAwesomeIcon />，我希望能够将这个组件用于我的应用程序中的所有图标，无论它们是Font Awesome图标还是我自己的图标。

注意：我了解如何编写 SVG 文件，我有兴趣将它们打包为可以加载到react-font-awesome 中的库。

Answer 1

我今天刚刚遇到这个问题，并通过创建图标定义来解决它，而无需执行library.add().

例子

图标

对于此示例，我使用两个图标：

1. 原生 Font Awesome图标

   

2. Simple Icons 中的自定义 Outlook图标

   

脚步

1. 创建包含自定义图标定义的文件。

   simpleIconsMicrosoftOutlook.ts

   import {
     IconDefinition,
     IconName,
     IconPrefix
   } from "@fortawesome/fontawesome-svg-core";
   
   export const simpleIconsMicrosoftOutlook: IconDefinition = {
     icon: [
       // SVG viewbox width (in pixels)
       24,
   
       // SVG viewbox height (in pixels)
       24,
   
       // Aliases (not needed)
       [],
   
       // Unicode as hex value (not needed)
       "",
   
       // SVG path data
       "M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z"
     ],
     iconName: "simple-icons-microsoft-outlook" as IconName,
     prefix: "simple-icons" as IconPrefix
   };
   

2. 将自定义图标作为道具传递给FontAwesomeIcon：

   应用程序.tsx

   import { faFontAwesome } from "@fortawesome/free-solid-svg-icons";
   import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
   
   import { simpleIconsMicrosoftOutlook } from "./simpleIconsMicrosoftOutlook";
   
   import "./styles.css";
   
   const App = () => {
     return (
       <>
         <p>
           <FontAwesomeIcon icon={faFontAwesome} />
           Native icon from <b>Font Awesome</b>
         </p>
   
         <p>
           <FontAwesomeIcon icon={simpleIconsMicrosoftOutlook} />
           Custom icon from <b>Simple Icons</b>
         </p>
       </>
     );
   };
   
   export default App;
   

3. 另外，css供参考：

   样式.css

   import {
     IconDefinition,
     IconName,
     IconPrefix
   } from "@fortawesome/fontawesome-svg-core";
   
   export const simpleIconsMicrosoftOutlook: IconDefinition = {
     icon: [
       // SVG viewbox width (in pixels)
       24,
   
       // SVG viewbox height (in pixels)
       24,
   
       // Aliases (not needed)
       [],
   
       // Unicode as hex value (not needed)
       "",
   
       // SVG path data
       "M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z"
     ],
     iconName: "simple-icons-microsoft-outlook" as IconName,
     prefix: "simple-icons" as IconPrefix
   };
   

4. 结果：