資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Material UI 中使用圖示？
圖示在增強使用者介面的視覺吸引力和可用性方面發揮著至關重要的作用。在使用 Material UI 框架時，整合圖示是一個無縫的過程，可以為您的應用程式增添一絲優雅和功能性。在本文中，我們將探討如何在 Material UI 中使用圖示，並利用庫提供的廣泛的圖示集合。
首先，Material UI 提供了自己的圖示元件集，這些元件易於使用且高度可定製。這些元件旨在符合 Material Design 指南，確保一致性和連貫的視覺體驗。無論您需要箭頭和複選框等基本圖示，還是需要用於特定目的的更復雜圖示，Material UI 都能滿足您的需求。
安裝
要安裝並在您的 package.json 依賴項中儲存，請使用 npm 執行以下命令：
npm
npm install @mui/icons-material
yarn
yarn add @mui/icons-material
上述元件使用 Material UI 的 SvgIcon 元件來渲染每個圖示的 SVG 路徑，因此對 @mui/material 具有對等依賴關係。
在 Material UI 中使用圖示的步驟
要在使用 Material UI 的 React 應用程式中使用圖示，您首先需要匯入圖示。
步驟 1：匯入圖示
在 Material UI 中匯入圖示有兩種不同的方法，下面將討論這兩種方法：
選項 1：
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm'; import ThreeDRotation from '@mui/icons-material/ThreeDRotation';
選項 2：
import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';
步驟 2：在 React 應用程式中使用
現在，一旦您匯入了所需的圖示，我們就可以在我們的 React 應用程式中使用它們了。
<AccessAlarm color="primary" />
方法
要在 Material UI、React 中使用圖示，有兩種不同的方法。下面將討論這兩種方法：
SVG 圖示
Material-UI 提供了各種預構建的圖示，這些圖示被設計為 SVG（可縮放向量圖形）檔案。這些圖示是基於向量的，可以縮放和調整大小而不會損失質量。要在您的 React 元件中使用 SVG 圖示，您通常從 Material-UI 圖示庫匯入所需的圖示，並將其渲染為元件。請參見以下語法：
語法
import { IconButton } from '@material-ui/core';
import SvgIcon from '@mui/material/SvgIcon';
const MyComponent = () => {
return (
<SvgIcon>
{/* credit: plus icon from https://heroicons.com/ */}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"
/>
</svg>
</SvgIcon>
);
};
在語法中，我們從 Material-UI 匯入 IconButton 元件以及 Search 圖示。然後，我們將 Search 圖示作為子元件渲染在 IconButton 元件中。
圖示
Icon 元件將顯示來自任何支援連字的圖示字型的圖示。作為先決條件，您必須在專案中包含一個字型，例如 Material Icons 字型。要使用圖示，只需將圖示名稱（字型連字）用 Icon 元件包裝即可，請參見以下語法：
語法
import { IconButton, Icon } from '@material-ui/core';
const MyComponent = () => {
return (
<IconButton>
<Icon>add_circle</Icon>
</IconButton>
);
};
在此示例中，我們使用字串值“add_circle”渲染 Icon 元件，該值表示來自預設 Material Icons 庫的新增圓圈圖示。
示例 1：使用 createSvgIcon 建立圖示
在此示例中，建立了 SVG 圖示以在 Material UI React 專案中使用。
import React from "react";
import Box from "@mui/material/Box";
import { createSvgIcon } from "@mui/material/utils";
//creating a Home Icon using path of SVG
const HomeIcon = createSvgIcon(
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,
"Home"
);
//creating a Squar Box Icon using complete SVG
const SquareIcon = createSvgIcon(
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 6a3 3 0 013-3h2.25a3 3 0 013 3v2.25a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm9.75 0a3 3 0 013-3H18a3 3 0 013 3v2.25a3 3 0 01-3 3h-2.25a3 3 0 01-3-3V6zM3 15.75a3 3 0 013-3h2.25a3 3 0 013 3V18a3 3 0 01-3 3H6a3 3 0 01-3-3v-2.25zm9.75 0a3 3 0 013-3H18a3 3 0 013 3V18a3 3 0 01-3 3h-2.25a3 3 0 01-3-3v-2.25z"
clip-rule="evenodd"
/>
</svg>,
"Square"
);
//main App component
const App = () => {
return (
<div>
<Box
sx={{
"& > :not(style)": {
m: 2,
},
}}
>
<HomeIcon />
<HomeIcon color="primary" />
<SquareIcon />
<SquareIcon color="success" />
</Box>
</div>
);
};
export default App;
輸出
示例 2：使用 SvgIcon 元件建立 FontAwesome 圖示
此示例展示瞭如何在 Material UI 中使用 React 將 Font Awesome 圖示作為 SVG 圖示整合。不同的圖示分別顯示並在按鈕中顯示。
import * as React from 'react';
import PropTypes from 'prop-types';
import { faAdd } from '@fortawesome/free-solid-svg-icons/faAdd';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import SvgIcon from '@mui/material/SvgIcon';
const FontAwesomeSvgIcon = React.forwardRef((props, ref) => {
const { icon } = props;
const {
icon: [width, height, , , svgPathData],
} = icon;
return (
<SvgIcon ref={ref} viewBox={`0 0 ${width} ${height}`}>
{typeof svgPathData === 'string' ? (
<path d={svgPathData} />
) : (
svgPathData.map((d, i) => (
<path style={{ opacity: i === 0 ? 0.4 : 1 }} d={d} />
))
)}
</SvgIcon>
);
});
FontAwesomeSvgIcon.propTypes = {
icon: PropTypes.any.isRequired,
};
//main App component
const App = () => {
return (
<div>
<Box
sx={{
'& > :not(style)': {
m: 1,
},
}}
>
<IconButton aria-label="Example">
<FontAwesomeIcon icon={faAdd} />
</IconButton>
<Button variant="contained" color='success' startIcon={<FontAwesomeIcon icon={faHome} />}>
Go Back
</Button>
</Box>
</div>
);
};
export default App;
輸出
示例 3：使用 Icon 新增圖示
在此示例中，Icon 元件用於在使用 React 的 Material UI 中新增圖示。fg-loadcss 包用於啟用 Font Awesome 圖示的使用。
import * as React from "react";
import Icon from "@mui/material/Icon";
import Box from "@mui/material/Box";
//adding fg-loadcss to use the fontawesome icons in material ui
import { loadCSS } from "fg-loadcss";
//main App component
const App = () => {
React.useEffect(() => {
const node = loadCSS(
"https://use.fontawesome.com/releases/v5.14.0/css/all.css",
// Inject before JSS
document.querySelector("#font-awesome-css") || document.head.firstChild
);
return () => {
node.parentNode.removeChild(node);
};
}, []);
return (
<div>
<Box
sx={{
"& > :not(style)": {
m: 0.5,
},
}}
>
<Icon baseClassName="fas" className="fa-plus-square" />
<Icon
baseClassName="fas"
className="fa-plus-square"
fontSize="medium"
/>
<Icon
baseClassName="fas"
className="fa-plus-square"
sx={{ fontSize: 30 }}
/>
</Box>
</div>
);
};
export default App;
輸出
結論
總之，本文深入探討了在 Material UI 中使用圖示。透過遵循概述的方法並利用龐大的圖示集合，開發人員可以增強視覺美觀性。
270 次檢視
