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

우리는 gitlab-svgs 저장소에서 자체 아이콘 및 일러스트레이션 라이브러리를 관리합니다. 이 저장소는 npm에서 배포되며, yarn을 사용하여 종속성으로 관리됩니다. 사용 가능한 모든 아이콘 및 일러스트레이션을 탐색할 수 있습니다. 새 버전으로 업그레이드하려면 yarn upgrade @gitlab/svgs를 실행하세요.

아이콘

우리는 GitLab에서 SVG Sprite로 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인 우리의 컴포넌트 라이브러리는 스프라이트 아이콘을 표시하는 컴포넌트를 제공합니다.

사용 예시:

<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 기반 일러스트레이션을 표시하기 위해 img 태그를 사용하고, image_tag 또는 image_path 헬퍼를 사용하세요. 주위에 svg-content 클래스를 사용하면 잘 렌더링됩니다.

HAML/Rails에서의 사용

예제

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

Vue에서의 사용

Rails에서 SVG 경로를 전달하는 것은 권장되지 않습니다. Rails => Haml => Vue 대신에 SVG 일러스트레이션을 직접 Vue에서 가져올 수 있습니다.

템플릿에서 SVG 일러스트레이션을 사용하려면 @gitlab/svgs에서 SVG를 가져와야 합니다. 사용 가능한 SVG 경로는 GitLab SVG 미리보기기에서 확인할 수 있습니다.

아래는 SVG 일러스트레이션을 가져와서 GlEmptyState 컴포넌트와 함께 사용하는 방법의 예입니다.

컴포넌트:

<script>
import { GlEmptyState } from '@gitlab/ui';
// ?url 쿼리 문자열을 사용하면 SVG가 인라인 SVG가 아닌 URL로 가져옵니다
// 이는 번들 크기와 최적화된 로딩을 위해 유용합니다
import mergeTrainsSvgPath from '@gitlab/svgs/dist/illustrations/train-sm.svg?url';

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

<template>
  <gl-empty-state
    title="이 상태는 비어 있습니다"
    description="비어 있는 상태 설명"
    :svg-path="$options.mergeTrainsSvgPath"
  />
</template>

SVG 최소화

새로운 SVG 일러스트레이션을 개발하거나 내보낼 때는 SVGO 기반 도구인 SVGOMG를 사용하여 최소화하세요. GitLab SVG에 추가된 일러스트레이션은 자동으로 최소화되므로 수동 작업이 필요하지 않습니다.