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

우리는 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_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를 통해 SVG 스프라이트 아이콘을 표시하기 위한 컴포넌트가 제공됩니다.

사용 예시: 

<script>
import { GlIcon } from "@gitlab/ui";

export default {
  components: {
    GlIcon,
  },
};
<script>

<template>
  <gl-icon
    name="issues"
    :size="24"
    class="class-name"
  />
</template>
  • name: SVG 스프라이트에 나열된 아이콘의 이름
  • size: (옵션): 크기에 대한 숫자 값으로, 특정 CSS 클래스에 매핑됩니다 (사용 가능한 크기: 8, 12, 16, 18, 24, 32, 48, 72은 sXX CSS 클래스에 매핑됨)
  • class (옵션): SVG 태그에 추가할 추가 CSS 클래스

HTML/JS에서의 사용법

JS 내부에서 아이콘을 렌더링하려면 다음 함수를 사용하세요: gl.utils.spriteIcon(iconName)

로딩 아이콘

HAML/Rails에서의 사용법

HAML이나 Rails에서 로딩 스피너를 삽입하려면 gl_loading_icon 도우미를 사용합니다. 

= gl_loading_icon

gl_loading_icon 도우미와 함께 다음 중 하나 이상의 속성을 포함할 수 있습니다. 아래 예시를 통해 확인할 수 있습니다:

  • inline (옵션): true인 경우 인라인 요소에서 사용하며, 그렇지 않으면 블록 요소(기본값)로 스피너가 중앙에 배치됩니다.
  • color (옵션): dark (기본값) 또는 light.
  • size (옵션): sm (기본값), md, lg, 또는 xl.
  • css_class (옵션): 기본적으로 아무것도 설정되어 있지만, 정렬이나 간격을 세밀하게 조정하는 데 사용할 수 있는 유틸리티 클래스입니다.

예시 1:

다음 HAML 표현식은 로딩 아이콘의 마크업을 생성하고 아이콘을 중앙에 배치합니다. 

= gl_loading_icon

예시 2:

다음 HAML 표현식은 인라인 로딩 아이콘의 마크업을 생성하고 사용자 정의 크기로 설정합니다. 또한 여백 유틸리티 클래스를 추가합니다. 

= gl_loading_icon(inline: true, size: 'lg', css_class: 'gl-mr-2')

Vue에서의 사용법

GitLab UI 컴포넌트 라이브러리는 GlLoadingIcon 컴포넌트를 제공합니다. 컴포넌트의 storybook를 통해 사용에 대한 자세한 정보를 확인할 수 있습니다.

예시:

다음 코드 스니펫은 Vue 컴포넌트에서 GlLoadingIcon을 사용하는 방법을 보여줍니다. 

<script>
import { GlLoadingIcon } from "@gitlab/ui";

export default {
  components: {
    GlLoadingIcon,
  },
};
<script>

<template>
  <gl-loading-icon inline />
</template>

SVG 일러스트레이션

앞으로는 img 태그를 사용하여 image_tag 또는 image_path 도우미를 사용하여 SVG 기반 일러스트레이션을 표시합니다. 이를 통해 좋은 렌더링이 보장됩니다.

HAML/Rails에서의 사용법

예시 

.svg-content
  = image_tag 'illustrations/merge_requests.svg'

Vue에서의 사용법

템플릿에서 SVG 일러스트레이션을 사용하려면 속성으로 경로를 제공하고 표준 img 태그를 통해 표시하세요.

컴포넌트: 

<script>
export default {
  props: {
    svgIllustrationPath: {
      type: String,
      required: true,
    },
  },
};
<script>

<template>
  <img :src="svgIllustrationPath" />
</template>

SVG 최소화

새 SVG 일러스트레이션을 개발하거나 내보낼 때 SVGO를 사용한 SVGOMG와 같은 도구를 사용하여 최소화하십시오. GitLab SVG에 추가된 일러스트레이션은 자동으로 최소화되므로 매뉴얼 조치가 필요하지 않습니다.