import MenuIcon from 'material-ui-icons/Menu';
μμΈ
λͺ¨λμ μ°Ύμ μ μμ: 'material-ui-icons/Menu'λ₯Ό νμΈν μ μμ΅λλ€.
μμ μμ μ νν μ½λ μ¬μ©: https://github.com/mui-org/material-ui/blob/v1-beta/docs/src/pages/demos/app-bar/ButtonAppBar.js
μ€ μ΄κ²μ ν΅μ¬ material-ui ν¨ν€μ§μ μΌλΆκ° μλλλ€: npm install --save material-ui-icons
μ΄ λ¬Έμ λ₯Ό κ²ͺκ³ μλ λ€λ₯Έ μ¬λ: npm install @material-ui/icons
μΈμ κ°λ material-ui-icons
μ μ¬μ© μ€λ¨ κ²½κ³ λ₯Ό μΆκ°ν κ²μ
λλ€. νμ¬λ‘μλ κΈ°λ₯μ μΌλ‘ λμΌνμ§λ§ Googleμμ μ μμ΄μ½μ μΆμνλ©΄ @material-ui/icons
λ§ μ
λ°μ΄νΈλ©λλ€.
@material-uiλ₯Ό μ
λ°μ΄νΈν΄μΌ ν©λλ€.
λ°λΌμ ν°λ―Έλμ μμ±νμμμ€.
npm install @material-ui/core
npm install @material-ui/icons
κ·Έλ¦¬κ³ 'npm start'λ₯Ό λ€μ μμνμμμ€.
μμ¬μ λν λμΌν ν¨ν€μ§κ° μμ΅λκΉ?
npmμ λͺ¨λ ν¨ν€μ§λ μμ¬μμ μ¬μ©ν μ μμ΄μΌ ν©λλ€(λ€λ₯Έ λ μ§μ€νΈλ¦¬λ₯Ό μ¬μ©νμ§λ§ ν΄λΉλμ§ μλ κ²μΌλ‘ μμ¬λλ κ²½μ° μ μΈ).
μ°ΈμΌλ‘ @eps1lon ... μ€μΉνλ λμ λ¬Έμ κ° λ°μνμ΅λλ€. κ·Έλμ μ΄λ¦μ΄ κ°μ μλͺ μ΄ μλ ν¨ν€μ§κ° μλ μ΄μ μ λλ€. κ°μ¬ ν΄μ.
μ΄ μ€λ₯μ λν΄ μ΄λ€ μκ°μ΄ μμΌμ κ°μ?
λͺ¨λμ μ°Ύμ μ μμ: 'E:\Material Ui\firstapp\src'μ '@material-ui/core/Grid'λ₯Ό νμΈν μ μμ΅λλ€.
:(
@atuljustano λ³λμ μ΄μλ₯Ό μ΄κ³ ν νλ¦Ώμ μμ±ν΄μ£ΌμΈμ.
@atuljustano μ λ° νμ§ λ§μΈμ. μ°λ¦¬λ λ²κ·Έ λ° κΈ°λ₯ μμ²μ μΆμ νκΈ° μν΄ λ μ μ μΌλ‘ GitHub λ¬Έμ λ₯Ό λ°νν©λλ€. λμ StackOverflow λλ spectrum.chatμ μ¬μ©νμμμ€. μ§λ¬Έμ νκ·Έλ₯Ό μ§μ νλ λ° μ¬μ©ν μ μλ "material-ui"λΌλ StackOverflow νκ·Έκ° μμ΅λλ€. κ°μ¬ ν΄μ!
μλ
νμΈμ, ....node_modules/@material-ui/icons"' has no exported member 'MenuIcon'.
@material-ui/icons
μ€μΉμλ λΆκ΅¬νκ³
λλ κ°μ λ¬Έμ κ°μλ€ κ·Έλ₯ μ€μΉ
μμ΄μ½μ κ²½μ°
npm install @material-ui/icons
κ·Έλ¦¬κ³ λ€λ₯Έ μ¬λ£λ€μ λν΄
npm install @material-ui/core
κ·Έλ¦¬κ³ μ΄λ κ² κ°μ Έμ€κΈ°
'@material-ui/core/AppBar'μμ AppBar κ°μ Έμ€κΈ°;
'@material-ui/icons/Search'μμ SearchIcon κ°μ Έμ€κΈ°;
μ΄κ²μ μ‘°κΈ λ λͺ ννκ² νκΈ° μν΄ κ³΅μ λ¬Έμλ₯Ό μ λ°μ΄νΈνλ κ²μ΄ μ’μ κ²μ λλ€.
@catonmat Material Icons νμ΄μ§μ 첫 λ²μ§Έ λ¬Έμ₯μ ν¨ν€μ§ μ΄λ¦μ μΈκΈν©λλ€. μ€μΉ λ¬Έμμμλ λ€λ£Ήλλ€. μμ΄μ½μ μ¬μ©νλ λͺ¨λ μλ κ°μ Έμ€κΈ°λ₯Ό 보μ¬μ£Όκ³ κ° μμ΄μ½ 미리보기μλ λ³΅μ¬ κ°λ₯ν κ°μ Έμ€κΈ°κ° μμ΅λλ€.
μ°λ¦¬κ° λ λͺ ννκ² νκΈ° μν΄ λ¬΄μμ ν μ μλ€κ³ μ μν©λκΉ?
κ·Έκ²μ λλ₯Ό μν΄ μΌνμ΅λλ€, κ°μ¬ν©λλ€
μμ¬μ λν λμΌν ν¨ν€μ§κ° μμ΅λκΉ?
Yarnμ NPMκ³Ό λμΌν μμ€λ₯Ό μ¬μ©ν©λλ€. λ°λΌμ NPM/Yarn ν¨ν€μ§μλ μ°¨μ΄κ° μμ΅λλ€.
λ¬Έμ κ° λ°μνμ¬ vscodeμμ μλμΌλ‘ μμ΄μ½μ κ°μ Έμ€λ €κ³ νμ§λ§ μλνμ§ μμμ΅λλ€. κ²°κ³Όμ μΌλ‘ import DeleteIcon from '@material-ui/icons/Delete';
μ κ°μ λ³λμ λ°©μμΌλ‘ κ°μ ΈμμΌ νμ΅λλ€.
μ¬κΈ°μ DeleteIcon
μ Delete
λ μλ‘ λ€λ₯Έ μ΄λ¦μ
λλ€.
@adisher μνλ κ²½μ° Delete
κ°μ Έμ¬ μ μμ§λ§ λμ€μ κ΅¬μ± μμλ₯Ό μ¬μ©ν λ DeleteIcon
λ‘ κ°μ Έμ€λ κ²μ΄ λ λͺ
νν©λλ€.
λ³ν
'@material-ui/icons/Menu'μμ MenuIcon κ°μ Έμ€κΈ°;
μκ²:
'@material-ui/icons/Menu'μμ λ©λ΄ κ°μ Έμ€κΈ°;
μλͺ» κ°μ Έμ€κΈ° λλ¬Έμ μ΄ λ¬Έμ κ° λ°μνμ΅λλ€. λλ μ¬μ©νλ €κ³ νλ€
import { MenuIcon } from '@material-ui/icons/Menu'
νμ§λ§ λλ κ·Έκ²μ λ³κ²½ν΄μΌνμ΅λλ€
import MenuIcon from '@material-ui/icons/Menu'
μ΄ λ¬Έμ λ₯Ό κ²ͺκ³ μλ λ€λ₯Έ μ¬λ:
npm install @material-ui/icons
νλ€. μλλ€. λλ€.
VS μ½λ μ¬μ©
μμ΄μ½κ³Ό μ½μ΄κ° λͺ¨λ μ€μΉλμ΄ μμ΅λλ€.
SearchIconμ΄ μ μ¬ν μ€λ₯λ₯Ό λ°νν©λλ€.
**μ»΄νμΌ μ€ν¨
λͺ¨λμ μ°Ύμ μ μμ: [νλ‘μ νΈ νμΌ κ²½λ‘]μ '@material-ui/icons/Search'
@ ./src/Header.js 14:14-50**
λ€μμ κ°μ Έμ€κΈ° μ§μΉ¨μ
λλ€.
"@material-ui/icons/Search"μμ SearchIcon κ°μ Έμ€κΈ°;
HTML:
μ’ μμ±:
"@material-ui/core": "^4.11.0",
"material-ui-icons": "^1.0.0-beta.36",
@material-uiλ₯Ό μ λ°μ΄νΈν΄μΌ ν©λλ€.
λ°λΌμ ν°λ―Έλμ μμ±νμμμ€.npm install @material-ui/core npm install @material-ui/icons
κ·Έλ¦¬κ³ 'npm start'λ₯Ό λ€μ μμνμμμ€.
ν¨κ³Όκ°μλ€!
@material-uiλ₯Ό μ λ°μ΄νΈν΄μΌ ν©λλ€.
λ°λΌμ ν°λ―Έλμ μμ±νμμμ€.npm install @material-ui/core npm install @material-ui/icons
κ·Έλ¦¬κ³ 'npm start'λ₯Ό λ€μ μμνμμμ€.
ν¨κ³Όκ°μλ€!
μ, λ€λ₯Έ μ€λ λμμ μ μν μ΄ ν¨ν€μ§κ° μ λͺ©μ μ λ§μ§ μμμ λ°κ²¬νμ΅λλ€.
"material-ui-icons": "^1.0.0-beta.36",
κ·νμ μ κ·Ό λ°©μμ μ¬μ©νμ¬ λ€μ μ€μΉνκ³ λ¬Έμ κ° ν΄κ²°λμμμ λ°κ²¬νμ΅λλ€. κ³ λ§μμ μλ₯΄ν!
κ°μ₯ μ μ©ν λκΈ
μ΄ λ¬Έμ λ₯Ό κ²ͺκ³ μλ λ€λ₯Έ μ¬λ:
npm install @material-ui/icons
https://www.npmjs.com/package/@material-ui/icons