嵌入 Iconify 圖片

Iconify design 官網說:
Iconify is an open source project. Almost all parts of the project use MIT license.
MIT 加 open source
所以若想要找 SVG 小圖標，Iconify design 會是個好選擇
下面範例紀錄如何在 Docusaurus 中使用 Iconify icons

另外，加映介紹 react-icons 使用方式
為 React 官方提供的 icons

*Iconify Icons *React Icons

Iconify 安裝整合套件  

    npm install @iconify/react

Iconify Mdx theme 設定

1.MDXComponents.js

檔案路徑: src.theme.MDXComponents.js

    import React from 'react';
    // Import the original mapper
    import MDXComponents from '@theme-original/MDXComponents';
    import { Icon } from '@iconify/react'; // Import the entire Iconify library.
    
    export default {
      ...MDXComponents,
      
      IconifyIcon: Icon, // Make the iconify Icon component available in MDX as <icon />.
    };

2.Mdx 使用範例

• 使用自訂的 MDXComponents 來繪製 IconifyIcon
• icon 屬性後方接的是 iconify icon path，所需圖片可至 Iconify design 查找

// import React from 'react'; // 這行似乎可以省略

<IconifyIcon icon="mdi:github" height="48" /> GitHub icon.

<IconifyIcon icon="logos:figma" height="48" /> Figma icon.

GitHub icon.

Flag of Taiwan.

Figma icon.

Iconify JSX 使用範例

• 直接 react 用官方語法使用 Icon 元件

1.IconifyJsxDemo.js

檔案路徑: src.pages.iconify.IconifyJsxDemo.js

• icon 屬性後方接的是 iconify icon path，所需圖片可至 Iconify design 查找
• Demo Link

    import React from 'react';
    import { Icon } from "@iconify/react";
    
    export default function IconifyJsxDemo() {
        
      return (
        <div className="container">
        
        <Icon icon="mdi:github" height="55" />
        <Icon icon="logos:figma" height="55" />
        <Icon icon="mdi-light:home" height="55" />    
    
        </div>
      );
    }

Iconify 路經說明  

• Iconify design Official 官網位置
• 選取所要的圖示之後點右下角 ⋮ 會出現屬性框。第一行資料即為 Iconify Icon Path

Iconify 其他參數

• 更多請參考

attr	desc
inline	boolean 改變垂直對齊
width	字串數字 圖示寬度
height	字串數字 圖示高度
hFlip	boolean 水平翻轉圖示
vFlip	boolean 垂直翻轉圖示
flip	hFlip和vFlip的字串替代
rotate	數字字串 旋轉圖示
color	字串 改變圖示顏色
onLoad	資料載入完成後的 callback
className

• 註: color 屬性，僅限用於單色圖示，部分圖示不適用。且可以採下列兩種設定方式

<IconifyIcon icon="mdi:github" /> 

<IconifyIcon icon="mdi:github" style={{ color: "red" }} /> 

• 註: width and height 也可以 fontSize 進行設定。
  • 預設 1em

<IconifyIcon icon="flag:tw-4x3" height="48" /> 

<IconifyIcon icon="flag:tw-4x3" style={{ fontSize: "70px" }} /> 

加映 react-icons 使用  

• react-icons 清單

安裝 react-icons

npm install react-icons

react-icons 線上選取圖標

• react-icons 清單 選取 icon sets 再點選圖標
• 點選圖標後彈出方塊會提示 import 與使用方式

import { Gi3dGlasses } from "react-icons/gi";

<Gi3dGlasses  style={{ color: 'blue', fontSize: '50px' }} />

react-icons 使用範例

jsx

import React from 'react';
import { Icon } from "@iconify/react";
import { Gi3dGlasses } from "react-icons/gi";

export default function IconifyJsxDemo() {
    const style = { color: "green", fontSize: "1.5em" }
    
  return (
    <div className="container">
    <h1>Insect Totem: React Icons Exercise</h1>
    <Gi3dGlasses size={30} color="#FB2576" />  
    <Gi3dGlasses style={{ color: 'blue', fontSize: '500px' }} />  
    <Gi3dGlasses style={style} />  
    </div>
  );
}

mdx

    <Gi3dGlasses style={{ color: 'blue', fontSize: '50px' }} />