Material-ui: ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•?

์— ๋งŒ๋“  2015๋…„ 06์›” 15์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mui-org/material-ui

npm install material-ui ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ–ˆ์Šต๋‹ˆ๋‹ค.
<FontIcon className='mui-icon-sort' /> ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํ‘œ์‹œํ•  ์•„์ด์ฝ˜์ด ์—†์Šต๋‹ˆ๋‹ค.
์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@checkraiser <FontIcon> ๋ฉ”์†Œ๋“œ๋กœ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ”„๋กœ์ ํŠธ์— Google ๊ธ€๊ผด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” Google ์›น ๊ธ€๊ผด <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ์—์„œ Google ์ž๋ฃŒ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์•„๋ž˜์— ์–ธ๊ธ‰๋œ ๋Œ€๋กœ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<RaisedButton>
    <i className="material-icons" style={{color: 'white'}}>sort</i>
</RaisedButton>

<FloatingActionButton>
    <i className="material-icons" style={{color: 'white'}}>sort</i>
</FloatingActionButton>

๋ชจ๋“  3 ๋Œ“๊ธ€

@checkraiser <FontIcon> ๋ฉ”์†Œ๋“œ๋กœ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ”„๋กœ์ ํŠธ์— Google ๊ธ€๊ผด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” Google ์›น ๊ธ€๊ผด <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ์—์„œ Google ์ž๋ฃŒ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์•„๋ž˜์— ์–ธ๊ธ‰๋œ ๋Œ€๋กœ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<RaisedButton>
    <i className="material-icons" style={{color: 'white'}}>sort</i>
</RaisedButton>

<FloatingActionButton>
    <i className="material-icons" style={{color: 'white'}}>sort</i>
</FloatingActionButton>

๊ฐ์‚ฌ ํ•ฉ๋‹ˆ๋‹ค @mairh - ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๋ถ€์˜ Google ๊ธ€๊ผด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•œ ์ง€์›์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ ์ด ๋ฌธ์ œ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. #829 ์ฐธ์กฐ

@mairh Material-UI์˜ ์•„์ด์ฝ˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๊นŒ?
Google Material UI ๊ธ€๊ผด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํฌํ•จํ•˜์—ฌ ๋ชฉ์ ์„ ํŒŒ๊ดดํ•˜๊ณ  48KB์ž…๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰