아이콘 폰트 변환 배경

위클리 미션 진행 중, SVG 아이콘을 사용하여 IconButton 컴포넌트를 구현하는 과정에서 마우스 이벤트에 따라 스타일을 변경하는 데 어려움을 겪고 있었다.

특히, SVG 파일은 특정 상태에서 자연스러운 색상 전환이나 애니메이션 효과를 적용하기가 까다로웠다.
직접 인라인으로 스타일을 적용하면 유지보수 측면에서 효율성이 떨어졌고, 필수 구현 사항인 transition을 통한 자연스러운 전환과 hover, active, disabled 상태의 색상 제공하기 어려웠다.

가장 쉽게 아이콘을 사용했던 방법을 돌이켜보면, FontAwesome과 같이 클래스명으로 아이콘을 쉽게 불러오고 폰트처럼 CSS 스타일을 쉽게 적용하는 것이었다.

이를 바탕으로, 곧 있을 팀 프로젝트에서 이 문제를 개선하기 위해 팀원 모두가 쉽게 사용할 수 있고 SCSS mixin을 통해 자유롭게 스타일링할 수 있는 폰트 기반의 아이콘으로 변환해 보기로 했다.

icoMoon

💡 IcoMoon은 SVG 아이콘을 폰트 파일로 변환하거나, SVG 스프라이트 또는 PNG 파일로 내보낼 수 있는 기능을 제공한다. 이를 통해 필요한 아이콘만 선택하여 커스터마이즈된 아이콘 세트를 생성할 수 있다.

🔗 IcoMoon

1️⃣ 아이콘 가져오기

Import Icon 👉 Select All 👉 Generate Font

2️⃣ Setting

Font Name
폰트 파일의 이름으로 프로젝트명으로 설정했다. 이름은 font-family 속성과 생성된 파일명으로 사용된다.
Class Prefix
클랙스명의 앞에 붙는 식별자로, ic-라는 prefix를 사용할 경우 모든 클래스명 앞에 ic-가 붙어 아이콘 관련 스타일임을 나타낼 수 있다.
Use i
아이콘을 사용할 때 <i className='ic-delete'></i> 형태로 사용할 수 있다.

3️⃣ 변환된 파일 저장하기

rolling-v1.0 | 다운로드 시 받아지는 파일들

✅ fonts 폴더 안의 변환된 파일(eot/svg/ttf/woff)을 Rolling 프로젝트의 assets 폴더에 저장한다.

✅ style.css 파일의 내용을 복사해서 프로젝트의 _icon-fonts.scss 파일에 붙여 넣는다.

💡 assets 폴더에 저장한 파일들을 불러와야하므로, 절대경로를 사용하여 아래와 같이 경로를 지정한다.

styles > base > _icon-fonts.scss

/* stylelint-disable */
@font-face {
  font-family: 'rolling';
  src: url('@/assets/icon-fonts/rolling.eot');
  src:
    url('@/assets/icon-fonts/rolling.eot#iefix') format('embedded-opentype'),
    url('@/assets/icon-fonts/rolling.ttf') format('truetype'),
    url('@/assets/icon-fonts/rolling.woff') format('woff'),
    url('@/assets/icon-fonts/rolling.svg#rolling') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'rolling' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// ...

4️⃣ 사용하기

💡 폰트와 동일하게 color, font-size 속성을 변경하여 스타일을 적용할 수 있다.

DeleteButton.jsx

import classNames from 'classnames/bind';
import styles from './DeleteButton.module.scss';

const cx = classNames.bind(styles);

const DeleteButton = () => {
  return (
    <button className={cx('btn-delete')}>
      <i className='ic-delete' />
    </button>
  );
};

export default DeleteButton;

DeleteButton.module.scss

.btn {
  &-delete {
    @include flexbox;

    width: 4rem;
    height: 4rem;

    i {
      font-size: 4rem;
      color: $white;
      transition: color ease-in-out 0.3s;
    }

    &:not(:disabled):hover {
      i {
        color: $system-error;
      }
    }
  }
}

Card 컴포넌트의 삭제 버튼 구현

프로젝트 적용 및 효과

Rolling 프로젝트 당시 아이콘 폰트 설명 자료

커스텀 아이콘 폰트로 변환한 후, 프로젝트 세팅 단계에서 변환 과정과 사용 이점을 설명하며 사용법을 제안했다.
팀원들도 FontAwesome과 유사한 방법으로 스타일링이 가능하다는 점에서 러닝 커브가 낮고 쉽게 적용할 수 있다는 점을 긍정적으로 평가했고 프로젝트에 적용하게 되었다.

사용 효과

일관된 스타일링
모든 팀원이 동일한 <i> 태그를 사용하여 일관되게 아이콘을 불러오고 SCSS mixin을 사용하여 스타일링 할 수 있었습니다.
자연스러운 전환 효과
transition을 적용하여 자연스러운 색상 전환이 가능해졌습니다.
유지보수 용이성
폰트 아이콘은 텍스트 스타일링과 같은 방식으로 관리할 수 있어 유지보수가 쉬워졌습니다.
쉬운 사용법
FontAwesome 사용법과 유사하므로 쉽게 활용할 수 있었습니다.

Post Detail Page

IcoMoon으로 SVG 아이콘 폰트 변환하기