[Material-UI 실습] 10. Icons, Material Icons

Material-UI를 이용하여 icon을 사용하는 방법은 세 가지가 있다.

 

1. Material-UI에서 제공하는 컴포넌트인 Material Design icon을 사용하는 방법
2. 사용자가 SVG icon을 정의하고 SvgIcon 컴포넌트로 감싸서 사용하는 방법
3. 사용자가 icon을 정의하고 Icon 컴포넌트로 감싸서 사용하는 방법

각각의 방법으로 icon을 구현해보았다.

 

IconTutorial.js

import React, { Component } from 'react';
import HomeIcon from '@material-ui/icons/Home';
import Icon from '@material-ui/core/Icon';
import SvgIcon from '@material-ui/core/SvgIcon';
class IconTutorial extends Component {
  render() {
    return (
      <div style={{ margin: '30px' }}>
        <div>Material Icons - Home Icon</div>
        <div style={{ display: 'flex' }}>
          <HomeIcon />
          <HomeIcon color="primary" fontSize="large" />
        </div>
        <div>SVG Icons - Home Icon</div>
        <div style={{ display: 'flex' }}>
          <SVGHomeIcon color="secondary" fontSize="large" />
          <SVGHomeIcon color="error" style={{ fontSize: '5rem' }} />
        </div>
        <div>Font Mateiral Icons -Add Icon</div>
        <div style={{ display: 'flex' }}>
          <Icon>add_circle</Icon>
          <Icon color="primary" fontSize="large">add_circle</Icon>
        </div>
      </div>
    );
  }
}
class SVGHomeIcon extends Component {
  render() {
    return (
      <SvgIcon {...this.props}>
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
      </SvgIcon>

    );
  }
}
export default IconTutorial;

 

아이콘을 위의 세 방법에 따라 순서대로 구현하였고 화면 결과는 다음과 같다.

 

Material Design icon을 이용한 방법

첫 번째 줄에 위치한 아이콘은 Material-UI에서 제공하는 컴포넌트를 직접 사용하여 구현하였다. 가장 간단한 방법으로

@material-ui/icons/Hom을 import하여 컴포넌트로 사용하였다. Material-UI에서는 천 개가 넘는 icon을 제공하므로 간단한 프로젝트에서는 이 기능만으로도 충분하리라 생각한다.

 

여기서는 쉽게 Material-UI에서 제공하는 icon을 검색할 수 있다.

https://material-ui.com/components/material-icons/

Material Icons - Material-UI

SVG icon을 정의하고 SvgIcon 컴포넌트로 감싸는 방법

 

두 번째 줄에 위치한 아이콘은 직접 HomeIcon에서 직접 SVG icon을 만들고 SvgIcon 컴포넌트로 감싸서 구현하였다. 첫 번째 방법보다는 번거롭지만 직접 구현하기 때문에 자유도가 매우 높다. SVG icon은 2차원 벡터를 이용하여 직접 그림을 그리는 방식으로 구현한 아이콘이다. 이미지를 사용하여 icon을 구현하면 크기에따라 화질이 달라지고 색상 변경이 불가능하다는 단점이 있다. SVG는 이러한 단점이 없어 아이콘을 구현하는데 자주 이용한다. 물론 첫 번째 방법도 SVG로 구현한 icon이다.

 

icon을 정의하고 Icon 컴포넌트로 감싸서 사용

세 번째 줄에 위치한 아이콘은 icon을 정의하고 Icon 컴포넌트로 감싸서 구현하였다. icon 구현은 여러 방법중에 Google Web Fonts를 이용하여 구현하였다. 이를 위해서 index.html에 다음과 같은 코드를 삽입하였다.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

 

Icon 컴포넌트를 이용하고 아이콘 사이에 add_circle이라는 글자를 넣으면 해당 글자에 매칭된 아이콘이 구현된다. 다른 글자를 넣으면 해당 글자에 매칭된 아이콘이 구현된다. 아이콘에 매칭된 글자는 여기서 확인 가능하다. 역시 쉽게 icon을 검색할 수 있다.

https://material.io/resources/icons/?icon=3d_rotation&style=baseline

Material Icons

 

Material-UI를 이용하여 icon을 구현하는 방법은 다음을 참고하였다.

https://material-ui.com/components/icons/

React Icon Component - Material-UI

https://material-ui.com/components/material-icons/

Material Icons - Material-UI

예제 확인

https://jb-material-ui-tutorial.herokuapp.com/

Material UI Tutorial