500 CSS 아이콘 - css.gg

여러분, 안녕하세요

방금 Product Hunt에 내 프로젝트를 게시했습니다.
https://www.producthunt.com/posts/css-gg/

흥미롭다면 upvoting을 고려하십시오.

사이트: 사이트 직접보기

--

css.gg는 사용자 지정이 가능하고 사용하기 쉬운 미니멀리즘 모양의 아이콘 세트입니다.

전체 라이브러리는 CSS로 제작되어 웹사이트가 매우 빠르게 렌더링되기 때문에 ⚡️ 수행 웹사이트에 집중하는 사람들에게 이상적이며, 다른 기능 중에서 나머지 스타일로 작업하는 것처럼 컴파일할 수 있습니다.

🥂 css.gg는 완전 무료이며 영원히 유지됩니다.

🛠 앱에 통합하려는 사용자를 위해 스타일, 마크업, 보기 및 API 호출을 포함한 모든 아이콘 세부 정보와 함께 사용할 수 있는 API 엔드포인트가 있습니다.

📖 배우고 미리보기를 원하는 사람들을 위해 단일 페이지에 각 아이콘이 있고 CSS가 어떻게 구축되었는지 직접 미리보기할 수 있습니다.

🚀 완전히 CSS이기 때문에 성능은 다른 옵션과 비교할 수 없습니다. 모든 클래스에 스타일을 적용할 수 있으며 레이아웃을 깨지 않고 독립형으로 설계되었습니다.

📏확장성은 문제가 되지 않습니다. 모든 아이콘은 기본적으로 Retina Ready이며, 코드로 디자인되어 일반 아이콘이나 배경으로 원하는 크기를 가질 수 있습니다. 스케일링은 단일 CSS 변수 "--ggs"로 마법처럼 작동합니다.

지금까지 이 프로젝트를 지원해 주신 모든 분들께 감사드리며 첫날 github 70+ 별점에서만 받은 피드백에 압도당했습니다.

개인 데모가 필요한 사람은 연락하십시오.

마크업

<i class="gg-icon-name"></i>

스타일

 <!-- Uncompressed - Single Icon -->
<link href='https://css.gg/icon-name.css' rel='stylesheet'>

<!-- Compressed - Single Icon -->
<link href='https://css.gg/c?=|icon-name' rel='stylesheet'>

<!-- Multiple icons  -->
<link href='https://css.gg/c?=|icon-name|icon-name|icon-name' rel='stylesheet'>

<!-- All icons  -->
<link href='https://css.gg/c' rel='stylesheet'>

@수입

/* Uncompressed - Single icon */
@import url('https://css.gg/icon-name.css');

/* Compressed - Single icon*/
@import url('https://css.gg/c?=|icon-name');

/* Multiple icons */
@import url('https://css.gg/c?=|icon-name|icon-name|icon-name');

/* All icons */
@import url('https://css.gg/c');

API 참조

모든 데이터 - 단일 아이콘

https://css.gg/json?=|icon-name

모든 데이터 - 여러 아이콘

https://css.gg/json?=|icon-name|icon-name|icon-name

스타일 및 마크업만 반환

You need to specify in the end of url if you wish to pull only style or markup by using &op=css or &op=css+markup variables respectively.

아이콘 크기를 조정하는 방법

/* To resize an icon you just need to change the number of a css variable "--ggs" to any number 
you like if not specified it falls back to 1 or the actual size. */
.gg-icon-name {
    /* This value will multiple the actual size  */
    --ggs: 10;
}

/* The variable can be added to the parent,
custom class,body or root level if you want all icons same size. */
:root {
    --ggs: 6;
}

CDN 대안

JSON
https://unpkg.com/css.gg
https://cdn.jsdelivr.net/npm/css.gg

CSS
https://unpkg.com/css.gg/icons-compressed/icons.css
https://cdn.jsdelivr.net/npm/css.gg/icons-compressed/icons.css

XML
https://unpkg.com/css.gg/icons-xml/icons.xml
https://cdn.jsdelivr.net/npm/css.gg/icons-xml/icons.xml

NPM 패키지

https://www.npmjs.com/package/css.gg

Github 저장소

아스트리트 / css.gg

SVG 스프라이트, 스타일 구성 요소, NPM 및 API에서 사용 가능한 700개 이상의 순수 CSS, SVG 및 Figma UI 아이콘

데모 - Figma -

오픈 소스 CSS, SVG 및 Figma UI 아이콘
SVG 스프라이트, 스타일 구성 요소, NPM 및 API에서 사용 가능

500 CSS 아이콘 - css.gg

사이트: 사이트 직접보기

API 참조

모든 데이터 - 단일 아이콘

모든 데이터 - 여러 아이콘

스타일 및 마크업만 반환

아이콘 크기를 조정하는 방법

CDN 대안

NPM 패키지

Github 저장소

아스트리트 / css.gg

SVG 스프라이트, 스타일 구성 요소, NPM 및 API에서 사용 가능한 700개 이상의 순수 CSS, SVG 및 Figma UI 아이콘

데모 - Figma -

2.0의 새로운 기능

🥳 200개의 새로운 아이콘

🚀 SVG 아이콘

🔥 SVG 스프라이트

💅 스타일 컴포넌트

⚛️ 로컬 스타일 컴포넌트 반응

🦄 피그마 구성품

🔮 어도비 XD 구성 요소

목차

Reference

좋은 웹페이지 즐겨찾기