svg 아이콘 사용시 유의사항(with vue, css)

우리가 자주 사용하는 아이콘의 경우 컴포넌트화를 통해 사용할 수 있다. 특히 이 방법은 vue, react에서 자주 쓰이는 방법이며 또한 간편한다. 하지만 이 방법을 쓸 때 직면하는 여러 이슈가 있는데, 오늘은 svg아이콘을 사용할 때 유의하면 좋은 사항을 알아 본다! (vue 한정의 내용이 아닌 svg를 아이콘으로 쓸 때 유의할 점을 설명)

1. vue에서 svg 아이콘 컴포넌트 쓰기

• vue 공식문서에서 svg 아이콘을 사용할 때 컴포넌트화 하는 방식을 소개하고 있다.
• 이 방법을 사용하면 icon 컴포넌트에 props를 내려 width, height, color을 수정할 수 있다.

//testIcon.vue
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <g :fill="color"></g>
  </svg>
</template>

export default {
  props: {
    width: {
      type: [Number, String],
      default: 18
    },
    height: {
      type: [Number, String],
      default: 18
    },
    color: {
      type: String,
      default: 'currentColor'
    }
  }

• 생성한 아이콘 컴포넌트는 아래와 같이 사용할 수 있다.

  // 아이콘 컴포넌트 사용
  <test-icon :width="300" :height="300" :color="'#c3c3c3'"/>

• 그런데 svg를 아이콘으로 쓸 때 유의할 점이 있는데, 한 번 알아보자!

2. svg를 아이콘으로 쓸 때 유의할 점

이 내용은 vue 한정의 내용이 아닌 svg를 아이콘으로 쓸 때 유의할 점을 설명한다.

(1) svg 아이콘에 여백이 추가될 때

• 만약 우리가 svg icon을 특정 div안에 배치했다고 하자.

<div class="icon-area">
  <svg id="Layer_1"> ... </svg>
</div>

• 그리고 icon-area에 border색상을 주어 아이콘 영역을 확인해보았다.

.icon-area {
  border: 2px solid red;
  display: inline-block;
}
#Layer_1 {
  width: 300px;
  height: 300px;
}

• 짜잔! 이미지가 div안에 배치되었다! 어? 그런데 뭔가 이상하네?
  

  

  
  

• 잠시만! 왜 아이콘 밑에 빈공간이 더 있는..거지?
  

  

그 이유는 바로.. svg의 display가 inline이기 때문인데,
inline은 기본적으로 라인을 위한 여백을 생성한다.

• 그러므로 우리는 svg의 display를 block으로 지정해줘야 한다.
  (코드는 하단 codepen에서 확인 가능함)
  

  

See the Pen svg display by KumJungMin (@kumjungmin) on CodePen.

(2) icon 크기를 줄이면 storke도 작아질 때

• 이번에는 아래와 같은 svg 아이콘을 준비했다.
• 그런데 이 아이콘의 크기가 너무 작다! 너비와 높이를 200으로 변경해보자!

• 어라랏? 크기를 키우자 아이콘의 stroke(굵기)가 얇아졌다...ㅠ
• 이 경우에는 어떻게 하면 좋을까? 바로 vector-effect="non-scaling-stroke"를 사용하는 것이다!
  

  

• 아래와 같이 stroke-width를 사용하는 태그에 vector-effect="non-scaling-stroke"를 하면 svg가 확대, 축소되도 stroke-width는 영향을 받지 않는다.

<svg>
  <circle 
    vector-effect="non-scaling-stroke" 
    cx="25" 
    cy="25" 
    r="20" 
    fill="none" 
    stroke="#000" 
    stroke-width="2" 
   />
</svg>

See the Pen SVG scale without scaling strokes by KumJungMin (@kumjungmin) on CodePen.

(3) 부모의 색상을 아이콘에 반영해야할 때

• svg를 사용해 글자와 아이콘 색이 동일한 버튼을 만들고자 한다.

• html은 아래와 같이 작성했다. (svg 상세 코드는 생략함)

<div class="btn-add">
  <a class="label">
    <svg height="50" viewBox="0 0 512 512" width="50">
      <path id="icon" d="" fill="#2196f3"/> ...
    </svg>
    <span>PLUS</span>
  </a>
</div>

• 그런데 우리는 글자색상과 버튼 배경색을 항상 일치시키고 싶다.
• 이러한 경우 color에 currentColor를 지정하면 된다.
• currentColor는 요소의 색상을 상속받을 수 있다. (자세한 코드는 codepen에서 확인하자)

.label {
  ...
  color: #136a8a;

}
#icon {
  fill: currentColor;  /*#136a8a을 사용*/
} 

See the Pen svg currentColor by KumJungMin (@kumjungmin) on CodePen.

출처
아래 링크로 가면 더 자세히 알 수 있다!

• kamang님의 포스팅, display inline-block 나열시 공백 제거하기
• vue 공식문서, 편집가능한 SVG 아이콘 시스템
• SCALING AN SVG WITHOUT SCALING THE STROKE
• runebook, vector-effect
• w3school, currentColor