Web/Bootstrap

Bootstrap 4에서 svg 아이콘 사용하기

saltdoll 2018. 12. 5. 04:46
반응형

Bootstrap 4에서 svg 아이콘을 만들수 있습니다.

svg아이콘을 넣은 예제
svg로 만든 상자 아이콘

 

Bytesize Icons

https://github.com/danklammer/bytesize-icons/blob/master/README.md

 

 

 

svg 아이콘들은 백터 형태이기 때문에 사이즈가 변화되어도, 이미지 처럼 깨짐이 없습니다.

svg 모양
SVG 아이콘들

 

카메라 아이콘 SVG 태그

<svg id="i-camera" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />
<circle cx="16" cy="16" r="5" />
</svg>

 

여기서 width="20" height="20"으로 주면, 사이즈가 줄게 됩니다.
stroke-width="3"를 주면 더 두꺼워 집니다.

 

 

 

[ 모서리 부분을 값을 선택 ]

이미지 stroke
모서리를 round 값에 따라 다른 모양

Style stroke-linejoin stroke-linecap
Round round round
Bevel bevel butt
Miter miter butt

 

[ 두께를 다르게 하는 형태 ]

stroke-width 두께값을 다르게하면 표시가 다른게 나옵니다.

Weight stroke-width (px) stroke-width (%)
Ultra Light 0.5px 1.5625%
Thin 1px 3.125%
Light 1.5px 4.6875%
Regular 2px 6.25%
Medium 2.5px 7.8125%
Bold 3px 9.375%
Heavy 3.5px 10.9375%

 

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)