Material-ui: λͺ¨λ“ˆμ„ 찾을 수 μ—†μŒ: 'material-ui-icons/Menu'λ₯Ό ν•΄κ²°ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 03μ›” 08일  Β·  24μ½”λ©˜νŠΈ  Β·  좜처: mui-org/material-ui

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

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이 문제λ₯Ό κ²ͺκ³  μžˆλŠ” λ‹€λ₯Έ μ‚¬λžŒ: npm install @material-ui/icons

https://www.npmjs.com/package/@material-ui/icons

λͺ¨λ“  24 λŒ“κΈ€

였 이것은 핡심 material-ui νŒ¨ν‚€μ§€μ˜ 일뢀가 μ•„λ‹™λ‹ˆλ‹€: npm install --save material-ui-icons

이 문제λ₯Ό κ²ͺκ³  μžˆλŠ” λ‹€λ₯Έ μ‚¬λžŒ: npm install @material-ui/icons

https://www.npmjs.com/package/@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 νŽ˜μ΄μ§€μ˜ 첫 번째 λ¬Έμž₯은 νŒ¨ν‚€μ§€ 이름을 μ–ΈκΈ‰ν•©λ‹ˆλ‹€. μ„€μΉ˜ λ¬Έμ„œμ—μ„œλ„ λ‹€λ£Ήλ‹ˆλ‹€. μ•„μ΄μ½˜μ„ μ‚¬μš©ν•˜λŠ” λͺ¨λ“  μ˜ˆλŠ” κ°€μ Έμ˜€κΈ°λ₯Ό 보여주고 각 μ•„μ΄μ½˜ λ―Έλ¦¬λ³΄κΈ°μ—λŠ” 볡사 κ°€λŠ₯ν•œ κ°€μ Έμ˜€κΈ°κ°€ μžˆμŠ΅λ‹ˆλ‹€.

image

μš°λ¦¬κ°€ 더 λͺ…ν™•ν•˜κ²Œ ν•˜κΈ° μœ„ν•΄ 무엇을 ν•  수 μžˆλ‹€κ³  μ œμ•ˆν•©λ‹ˆκΉŒ?

그것은 λ‚˜λ₯Ό μœ„ν•΄ μΌν–ˆμŠ΅λ‹ˆλ‹€, κ°μ‚¬ν•©λ‹ˆλ‹€

원사에 λŒ€ν•œ λ™μΌν•œ νŒ¨ν‚€μ§€κ°€ μžˆμŠ΅λ‹ˆκΉŒ?

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

https://www.npmjs.com/package/@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",

κ·€ν•˜μ˜ μ ‘κ·Ό 방식을 μ‚¬μš©ν•˜μ—¬ λ‹€μ‹œ μ„€μΉ˜ν•˜κ³  λ¬Έμ œκ°€ ν•΄κ²°λ˜μ—ˆμŒμ„ λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€. κ³ λ§ˆμ›Œμš” μ•„λ₯΄νŒ!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰