아이콘 및 SVG 일러스트레이션

GitLab에서 SVG 스프라이트 아이콘과 일러스트레이션을 HAML/Rails, Vue, HTML/JS 환경에서 사용하는 방법을 설명합니다.

We manage our own icon and illustration library in the gitlab-svgs package. This package is published on npm , and is managed as a dependency with yarn. You can browse all available icons and illustrations . To upgrade to a new version run yarn upgrade @gitlab/svgs . 저희는 자체 아이콘 및 일러스트레이션 라이브러리를 gitlab-svgs 패키지로 관리합니다. 이 패키지는 npm 에 게시되어 있으며, yarn을 통한 의존성으로 관리됩니다. 사용 가능한 모든 아이콘 및 일러스트레이션 을 확인할 수 있습니다. 새 버전으로 업그레이드하려면 yarn upgrade @gitlab/svgs 를 실행하세요. 아이콘 # GitLab에서는 SVG 스프라이트를 사용하여 SVG 아이콘을 표시합니다. 아이콘은 한 번만 로드되며, ID를 통해 참조됩니다. 스프라이트 SVG 파일은 /assets/icons.svg 경로에 위치합니다. HAML/Rails에서의 사용법 # HAML 또는 Rails에서 스프라이트 아이콘을 사용하려면 전용 헬퍼 함수를 사용하세요: sprite_icon(icon_name, size: nil, css_class: '') icon_name : GitLab SVGs 목록에서 SVG 스프라이트에 사용할 icon_name 을 입력합니다. size (선택) : 다음 크기 중 하나를 사용하세요: 16, 24, 32, 48, 72 (이 값은 s16 과 같은 CSS 클래스로 변환됩니다). css_class (선택) : 추가 CSS 클래스를 지정할 때 사용합니다. 예시 = sprite_icon('issues', size: 72, css_class: 'icon-danger') 위 예시의 출력 결과 <svg class="s72 icon-danger"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons.svg#issues"></use> </svg> Vue에서의 사용법 # 컴포넌트 라이브러리인 GitLab UI 는 스프라이트 아이콘을 표시하는 컴포넌트를 제공합니다. 사용 예시: <script> import { GlIcon } from "@gitlab/ui"; export default { components: { GlIcon, }, }; <script> <template> <gl-icon name="issues" :size="24" class="class-name" /> </template> name : GitLab SVG Previewer 에 나열된 SVG 스프라이트 아이콘의 이름입니다. size (선택) : 크기를 나타내는 숫자 값으로, 특정 CSS 클래스에 매핑됩니다 (사용 가능한 크기: 8,