Day17 在React 中使用Material icons

在React中可以插入Material icon组件使用,步骤如下:

Material icons网址连结

1.首先先要安装@mui/icons-material的套件

安装套件连结

Installation // with npm

npm install @mui/icons-material

Installation // with yarn

yarn add @mui/icons-material

因使用这些组件需要 MUI SvgIcon组件来呈现每个图标的 SVG 路径,所以也要安装@mui/icons-material

npm install @mui/icons-material
or
yarn add @mui/icons-material

2.如何使用步骤如下:

主画面连结

  • 到主画面选取你要的icon後,复制连结,将它贴到程序中,如图
    https://ithelp.ithome.com.tw/upload/images/20211002/20139800hIxpZPzge5.png
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';

就是把icon的组件import到你的程序中,然後就像插入组件的方式,随插随用加在你需要的地方,也可以自定样式。

<div >
   <span ><DeleteForeverIcon className="delcom" /></span>
</div>

使用Material icons的画面如下:

https://ithelp.ithome.com.tw/upload/images/20211002/20139800Bsf2i6bIQv.png

备注-补充说明:

当我在使用Material icons的时後有碰到二个compile失败问题:

1.找不到emotion/react模组:无法解析

Failed to compile
./node_modules/@ emotion/react /index.js
Module not found: Can't resolve '@ emotion/react ' in 'D:\nodejs\react\firstapp\node_modules@ emotion/react

如果有出现这样的问题,需再安装@ emotion/react组件

连结网址

@emotion/react Install

yarn add @emotion/react

2.找不到@mui/styled-engine模组:无法解析

Failed to compile
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve '@emotion/styled' in 'D:\nodejs\react\firstapp\node_modules@mui\styled-engine'

一样需再安装@mui/styled-engine组件
连结网址

@emotion/styled Install

yarn add @emotion/react @emotion/styled

<<:  [Day17] 第十七章-Skill的反向定义关系

>>:  Day_20 DNS/DDNS/Port Forwards (一)

关於抽象

前面分别聊完了什麽是「物件」、「类别」、「介面」,接下来,就要来聊聊物件导向程序设计当中的四大概念:...

[DAY 27] _看门狗简介_视窗看门狗(1)

STM看门狗有两种,昨天讲完其中一种,今天来看看WWDG(window watchdog) 这也是在...

Day 14 在VSCode中使用Azure

前言 由於接下来要开始写到attention和Capsule的实作,主要是会研究一些github或是...

Golang快速入门-2(Day5)

那就接续着昨天的内容,今天提到的也是大家常用的function及slice function go在...

Day27. Blue Prism进化中的宝可梦–BP增加稳定与弹性的调校

有一阵子流行的宝可梦Go的App寻宝游戏, 吸引不少粉丝信徒的膜拜, 玩家们都希望自己手上的宝可梦能...