GitLab은 자체 아이콘 및 일러스트레이션 라이브러리를 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의 컴포넌트 라이브러리인 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, 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 컴포넌트를 제공합니다. 사용 방법은 스피너 문서에서 자세히 확인할 수 있습니다.

예시:

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

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

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

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

SVG 일러스트레이션#

지금부터 SVG 기반 일러스트레이션은 image_tag나 image_path 헬퍼와 함께 img 태그로 표시합니다. svg-content 클래스로 감싸면 렌더링 결과가 깔끔합니다.

HAML/Rails에서의 사용법#

예시

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

Vue에서의 사용법#

Rails에서 SVG 경로를 내려주는 방식은 권장하지 않습니다. Rails => Haml => Vue 대신 Vue에서 SVG 일러스트레이션을 직접 import 할 수 있습니다.

템플릿에서 SVG 일러스트레이션을 사용하려면 @gitlab/svgs에서 SVG를 import 합니다. 사용할 수 있는 SVG 경로는 GitLab SVG Previewer에서 확인할 수 있습니다.

다음은 SVG 일러스트레이션을 import 해 GlEmptyState 컴포넌트와 함께 사용하는 예입니다.

컴포넌트:

<script>
import { GlEmptyState } from '@gitlab/ui';
// The ?url query string ensures the SVG is imported as a URL instead of an inline SVG
// This is useful for bundle size and optimized loading
import mergeTrainsSvgPath from '@gitlab/svgs/dist/illustrations/train-sm.svg?url';

export default {
  components: {
    GlEmptyState
  },
  mergeTrainsSvgPath,
};
<script>

<template>
  <gl-empty-state
    title="This state is empty"
    description="Empty state description"
    :svg-path="$options.mergeTrainsSvgPath"
  />
</template>

SVG 최소화#

새 SVG 일러스트레이션을 개발하거나 내보낼 때는 용량을 줄이기 위해 SVGOMG처럼 SVGO 기반 도구로 최소화합니다. GitLab SVG에 추가된 일러스트레이션은 자동으로 최소화되므로 별도의 작업이 필요하지 않습니다.