Geomicons - 독특한 수작업 코드 SVG Iconset

웹 아이콘 세트는 현대 웹 디자인의 표준이되었습니다. 그들은 웹 디자이너에게 거대한 자산입니다. CSS를 통해 아이콘을 사용자 정의 할 수 있습니다. 품질 손실없이 크기를 조정할 수 있습니다..

그러나 일부 아이콘 팩은 소규모 사이트에서 부풀어 오르고 너무 커질 수 있습니다. Geomicons가 실제로 빛나는 곳입니다..

이것은 SVG에서 실행되는 사용자 정의 수작업 코드 아이콘 팩. JS 스크립트를 통해 아이콘을 삽입하거나 페이지에 직접 SVG 파일로 삽입 할 수 있습니다. 어느 쪽이든, 그들은 아름다운 벡터와 슈퍼 쉽게 restyle.

Geomicons의 주요 페이지는 모든 아이콘의 전체 데모를 제공합니다. 그들은 아주 간단하고 우리가 모두 잘 알고있는 전통적인 단색 평면 디자인 스타일을 따릅니다..

그러나 그들의 설치 정보는 데모 페이지에서 확실히 부족합니다. 이것을 설정하는 방법을 배우려면 GitHub 레포를 방문하여 지시 사항을 확인해야합니다..

기본적으로이 라이브러리는 CSS / JS로 작업하고 있다고 가정합니다. 이 아이콘을 페이지 요소에 직접 삽입 할 수 있습니다. 그러나 GitHub에서 아이콘을 다운로드하면 HTML에 직접 추가 할 수있는 모든 원시 SVG 파일을 가져옵니다..

문제는 그뿐입니다. 원시 SVG는 더 많은 편집이 필요합니다. 색상을 변경하는 반면 JS / CSS 경로는 코드를 통해 색상을 제어 할 수 있습니다..

간단히 geomicons.min.js 스크립트를 헤더에 추가하고 데이터 아이콘 속성을 HTML 요소에 추가하십시오. 그러면 CSS 클래스를 사용하여 자동으로 아이콘을 조작 할 수 있습니다..

Geomicons에 대해 정말 좋아하는 또 다른 사항은 노드 지원입니다. 다음은 GitHub 레포의 샘플 코드입니다.

var geomicons = require ( 'geomicons-open'); var pathData = geomicons.paths.heart; // 경로의 d 속성 값을 반환합니다. var svgString = geomicons.toString ( 'heart'); // SVG 문자열을 반환합니다.

노드에 익숙하지 않다면 아마도 노드 스 니펫을 사용할 필요가 없을 것입니다. React.js 버전의 아이콘도 마찬가지입니다..

여전히 주요 프레임 워크를 지원하는 것은 큰 문제입니다. 지오 콘이 의미하는 바가 크다는 증거입니다. 모든 유형의 웹 사이트 지원 성능 우선에 초점을 맞춤으로써.

이 아이콘에 테스트를 실행하려면 npm을 통해 복사본을 가져 오거나 GitHub를 통해 직접 다운로드 할 수 있습니다.

또한 Geomicons Wired라고하는 윤곽선 아이콘 세트가 있습니다..

어느 쪽이든, 이것은 미니멀리스트 웹 디자이너를위한 화려한 iconset. 아름다운 아이콘으로 사이트를 최적화하고 총 페이지로드 시간을 줄이는 완벽한 선택.