아이콘 가이드
아이콘 svg로 background-image에 사용하는 방법 안내
- 피그마에서 아이콘 전체를 드래그하여 한꺼번에 svg파일로 export한다.
- 피그마 플러그인 추천 : Figma Exporter, IconCrab
- svg 파일을 vscode로 열어 svg코드를 복사한다.
- svg 파일이 너무 길면 SVG 파일 압축 사이트에서 svg파일을 압축한다.
- URI Encoder 에 접속하여 svg 코드를 data URI 코드로 변환하여 복사한다.
예시 화면
- 복사한 코드는 cms-common.css root에 변수로 선언하여 적용한다.
- 아이콘의 컬러는 svg 태그 fill 속성에 hex컬러코드를 # -> %23으로 변경하여 적용 예 : #000000 적용시 fill="%23000000"
svg 아이콘 변수 선언
:root{
/* color */
--color01: #000;
--color02: #333;
--color03: #ededed;
/* icon */
--ico-close: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.9999 35.9999L24 24M24 24L12 12M24 24L36.0001 12M24 24L12 36.0001' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--ico-close-hover: #fff;
--ico-plus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_5_13944)'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23222222'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5_13944'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
--ico-plus-hover: var(--color02);
--ico-arr-right: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M19 12L13 6M19 12L13 18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
--ico-chev-arr-down: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10L12 14L8 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--ico-chev-arr-left: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 16L10 12L14 8' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--ico-home: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66663 16.6665H3.33329M3.33329 16.6665H8.33329M3.33329 16.6665V9.54328C3.33329 9.09799 3.33329 8.87523 3.38744 8.66803C3.43542 8.48441 3.51479 8.31065 3.62138 8.15362C3.74166 7.97643 3.90883 7.8295 4.24394 7.53628L8.24526 4.03512C8.8665 3.49154 9.17714 3.21973 9.52698 3.11627C9.83547 3.02504 10.1643 3.02504 10.4728 3.11627C10.8229 3.21981 11.134 3.49187 11.7561 4.03628L15.7561 7.53628C16.0912 7.82949 16.2585 7.97644 16.3788 8.15362C16.4854 8.31065 16.5641 8.48441 16.6121 8.66803C16.6662 8.87523 16.6666 9.09799 16.6666 9.54328V16.6665M8.33329 16.6665H11.6666M8.33329 16.6665V12.3332C8.33329 11.4127 9.07948 10.6665 9.99996 10.6665C10.9204 10.6665 11.6666 11.4127 11.6666 12.3332V16.6665M11.6666 16.6665H16.6666M16.6666 16.6665H17.3333' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--ico-calendar: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
아이콘 변수 적용 예시
- 아이콘의 변수는 --ico으로 시작하며 직관적인 고유 이름을 적용한다.
- 해당 아이콘의 호버효과로 적용되는 컬러 변수는 그 아이콘 바로 밑에 정의한다. 예: --ico-close-hover
1. 아이콘의 색상이 hover효과로 변하는 경우 아이콘을 mask:var(--ico-name) no-repeat center center/cover;로 적용하고 아이콘에 적용할 색상을 background-color에 적용한다.
주의! background-color는 아이콘에 적용되므로 아이콘 이외 배경에 색상을 적용하고 싶은 경우 2번 예시를 참고한다.
.slide-close{display:inline-block;position:relative;width:40px;height:40px;}
.slide-close:after{content:'';position:absolute;top:0;left:0;width:40px;height:40px;background:#fff;-webkit-mask:var(--ico-close) no-repeat center center/100%;mask:var(--ico-close) no-repeat center center/100%;transition:all 0.2s;}
.slide-close:hover:after{background:var(--ico-close-hover);}
2. 아이콘에 배경이 있는 경우 가상선택자에 아이콘을 적용한다.
.view-more{display:inline-block;position:relative;border-radius:50%;width:34px;height:34px;background:var(--color02);transition:all 0.2s;}
.view-more:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;-webkit-mask:var(--ico-plus) no-repeat center center/100%;mask:var(--ico-plus) no-repeat center center/100%;transition:all 0.2s;}
.view-more:hover{background:#fff;}
.view-more:hover:after{background:var(--ico-plus-hover);}