아이콘 및 SVG 일러스트레이션
우리는 gitlab-svgs
리포지터리에서 아이콘 및 일러스트레이션 라이브러리를 관리합니다. 이 리포지터리는 npm에 공개되어 있으며, yarn으로 의존성을 관리합니다. 사용 가능한 모든 아이콘 및 일러스트레이션을 찾을 수 있습니다. 새 버전으로 업그레이드하려면 yarn upgrade @gitlab/svgs
를 실행하세요.
아이콘
우리는 SVG 스프라이트와 함께 GitLab에서 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: 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 기반 일러스트레이션을 표시하세요. 주변에 svg-content
클래스를 사용하여 멋진 렌더링을 보장하세요.
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에 추가된 일러스트레이션은 자동으로 최소화되므로 매뉴얼 작업이 필요하지 않습니다.