프로젝트 소개

# Ionicons [Ionicons](http://ionicons.com/)은 웹, iOS, Android, 데스크톱 앱을 위해 제작된 1,300개의 아이콘을 포함한 완전한 오픈소스 아이콘 세트입니다. Ionicons는 [Ionic Framework](https://ionicframework.com/)를 위해 만들어졌으며, 모든 아이콘은 Material Design 및 iOS 버전을 모두 제공합니다. 참고: 모든 브랜드 아이콘은 해당 소유자의 상표입니다. 이러한 상표의 사용은 Ionic이 상표 소유자를 보증하거나 그 반대의 경우를 의미하지 않습니다. 이 아이콘 팩은 [Ionic](http://ionicframework.com/)과 함께 사용하도록 의도되었지만, 반드시 그럴 필요는 없습니다. 개인적 또는 상업적 용도로 어디서든 사용할 수 있습니다. 무료로 사용할 수 있으며 [MIT](http://opensource.org/licenses/MIT) 라이선스에 따라 사용이 허가됩니다. ## 기여 기여에 관심을 가져주셔서 감사합니다! [기여 지침](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md)을 읽고 [도움이 필요한](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) 라벨이 붙은 이슈를 확인해 주세요. ## 웹 컴포넌트 사용 Ionicons 웹 컴포넌트는 앱에서 Ionicons를 사용하는 쉽고 효율적인 방법입니다. 이 컴포넌트는 각 아이콘에 대해 SVG를 동적으로 로드하므로, 앱은 필요한 아이콘만 요청하게 됩니다. 또한 보이는 아이콘만 로드되며, 사용자 화면에 보이지 않는 "스크롤 아래" 아이콘은 SVG 리소스에 대한 fetch 요청을 하지 않습니다. ### 설치 [Ionic Framework](https://ionicframework.com/)를 사용하는 경우 Ionicons가 기본으로 포함되므로 설치가 필요 없습니다. Ionic Framework 없이 Ionicons를 사용하려면 페이지 끝, `</body>` 태그 바로 앞에 다음 `<script>`를 배치하여 활성화하세요. ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` `latest`를 원하는 Ionicons 버전으로 바꿀 수 있습니다. 예: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### 기본 사용법 Ionicons 패키지의 내장 아이콘을 사용하려면 ion-icon 컴포넌트의 `name` 속성을 채우세요: ```html <ion-icon name="heart"></ion-icon> ``` ### 사용자 정의 아이콘 사용자 정의 SVG를 사용하려면 `src` 속성에 URL을 제공하여 외부 SVG 파일을 요청하세요. `src` 속성은 `<img src="...">`와 동일하게 작동하며, URL은 이미지를 요청하는 웹페이지에서 접근 가능해야 합니다. 또한 외부 파일은 유효한 SVG여야 하며 SVG 요소 내에서 스크립트나 이벤트를 허용하지 않습니다. ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### 사용자 정의 자산 경로 다른 아이콘 세트를 로드하거나 Ionicons 아이콘이 다른 페이지나 경로에 호스팅된 경우, 다음을 통해 Ionicons가 아이콘을 가져오는 자산 URL을 설정할 수 있습니다: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // 아이콘 로드 루트 경로를 "<root>/public/svg"로 설정 setAssetPath(`${window.location.origin}/public/svg/`); // 특정 아이콘만 로드 addIcons({ add, logoIonic, save }); ``` 이렇게 하면 다음과 같이 이름이 지정된 아이콘을 사용할 수 있습니다: ```html <!-- 이제 "<root>/public/svg/heart.svg"에서 SVG를 가져옵니다 --> <ion-icon name="heart"></ion-icon> ``` ## 변형 Ionicons의 각 앱 아이콘에는 `filled`, `outline`, `sharp` 변형이 있습니다. 이러한 다양한 변형은 다양한 플랫폼에서 앱이 네이티브처럼 느껴지도록 제공됩니다. filled 변형은 접미사 없이 기본 이름을 사용합니다. 참고: 로고 아이콘에는 outline 또는 sharp 변형이 없습니다. ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### 플랫폼 특정성 Ionic Framework에서 아이콘을 사용할 때 플랫폼별로 다른 아이콘을 지정할 수 있습니다. `md` 및 `ios` 속성을 사용하고 플랫폼별 아이콘/변형 이름을 제공하세요. ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## 크기 아이콘 크기를 지정하려면 사전 정의된 글꼴 크기에 대해 size 속성을 사용할 수 있습니다. ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` 또는 `ion-icon` 컴포넌트에 `font-size` CSS 속성을 적용하여 특정 크기를 설정할 수 있습니다. 8의 배수(8, 16, 32, 64 등)인 픽셀 크기를 사용하는 것이 좋습니다. ```css ion-icon { font-size: 64px; } ``` ## 색상 `ion-icon` 컴포넌트에 `color` CSS 속성을 적용하여 아이콘 색상을 지정하세요. ```css ion-icon { color: blue; } ``` ## 선 두께 `outline` 아이콘 변형을 사용할 때 아이콘 크기 또는 인접 텍스트의 너비에 상대적인 시각적 균형을 개선하기 위해 선 두께를 조정할 수 있습니다. `ion-icon` 컴포넌트에 `--ionicon-stroke-width` CSS 사용자 정의 속성을 적용하여 특정 크기를 설정할 수 있습니다. 기본값은 32px입니다. ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## v4에서 마이그레이션 아이콘 삭제/이름 변경 목록은 [5.0 릴리스 노트](https://github.com/ionic-team/ionicons/releases/tag/5.0.0)를 참조하세요. ## 라이선스 Ionicons는 [MIT 라이선스](http://opensource.org/licenses/MIT)에 따라 사용이 허가됩니다. ## 관련 링크 * [Ionicons 홈페이지](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionic 포럼](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)