CSS 사용자 정의 속성으로 아이콘 시스템을 만든 방법

CSS 사용자 정의 속성을 아이콘 시스템으로 만듭니다 SVG는 의심 할 여지없이 웹 사이트 아이콘에 가장 적합한 형식입니다. 화면 픽셀 밀도에 관계없이 명확한 아이콘을 제공합니다.

웹 페이지에 SVG를 포함시키는 방법에는 여러 가지가 있으며 각 기술에는 고유 한 장점과 단점이 있습니다. 지난 몇 년 동안 CSS에서 아이콘을 직접 가져 오기 위해 SASS 기능을 사용하여 HTML 태그가 엉망이되지 않았습니다.

모든 아이콘 소스 코드가 포함 된 SASS 목록이 있습니다. 그런 다음 각 아이콘은 SASS 함수를 사용하여 데이터 URI로 인코딩하고 페이지 루트의 사용자 정의 속성에 저장됩니다.

간단히 여기에 제공하는 것은 CSS에서 직접 SVG 아이콘 라이브러리를 만드는 SASS 기능입니다.

SVG 소스 코드는 SASS 함수에 의해 컴파일되어 데이터 URI로 인코딩 한 다음 아이콘을 CSS 사용자 정의 속성에 저장합니다. 그런 다음 외부 이미지와 마찬가지로 CSS의 어디서나 아이콘을 사용할 수 있습니다.

이것은 내 개인 웹 사이트 코드에서 직접 추출한 예입니다.

데모 Sass 구조

모든 아이콘 소스 코드 */ $ SVG-ICONS : ( 버거 : '& lt; svg data-line = ""scss = ""viewbox = "0 ...' ); / * SASS 기능 인코딩 아이콘 */ @function svg ($ name) { @return url ( 'data : image/svg xml, #{$ encodedsvg}'); } / * 각 아이콘을 사용자 정의 속성에 저장 */ : 루트 { @each $ name, $ svg-icons in in $ code { ---svg- #{$ name} : #{svg ($ name)}; } } / * 내 버튼에 햄버거 아이콘 추가 */ .menu :: 이후 { 내용 : var (-svg-burger); } 이 기술은 장점과 단점이 있으므로 프로젝트 에서이 솔루션을 구현하기 전에 이러한 요소를 고려해야합니다.

pros SVG 파일에는

HTTP 요청이 필요하지 않습니다. 모든 아이콘은 한 위치에 저장됩니다. 아이콘을 업데이트 해야하는 경우 각 HTML 템플릿 파일을 통과 할 필요가 없습니다.

아이콘은 CSS와 함께 캐시됩니다.

아이콘의 소스 코드를 수동으로 편집 할 수 있습니다.

추가 태그를 추가하여 HTML을 오염시키지 않습니다.

CSS를 사용하여 아이콘의 색상 또는 일부 측면을 변경할 수 있습니다.

단점 .c-filters__summary h2:after { content: var(--svg-down-arrow); position: relative; top: 2px; margin-left: auto; animation: closeSummary .25s ease-out; } CSS를 사용하여 애니메이션을 추가하거나 SVG의 특정 부분을 업데이트 할 수 없습니다.

아이콘이 많을수록 컴파일 된 CSS 파일이 클수록.

나는 주로이 기술을 로고 나 일러스트레이션이 아닌 아이콘에 사용합니다. 인코딩 된 SVG는 항상 원래 파일보다 큽니다.

위 내용은 CSS 사용자 정의 속성으로 아이콘 시스템을 만든 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!