Web/Bootstrap
Bootstrap 4에서 svg 아이콘 사용하기
saltdoll
2018. 12. 5. 04:46
반응형
Bootstrap 4에서 svg 아이콘을 만들수 있습니다.
Bytesize Icons
https://github.com/danklammer/bytesize-icons/blob/master/README.md
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"를 주면 더 두꺼워 집니다.
[ 모서리 부분을 값을 선택 ]
Style | stroke-linejoin | stroke-linecap |
---|---|---|
Round | round | round |
Bevel | bevel | butt |
Miter | miter | butt |
[ 두께를 다르게 하는 형태 ]
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% |
반응형