アイコンと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のコンポーネントライブラリである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 クラスにマッピングされます)。
  • クラス（オプション）：SVG タグに追加する CSS クラス。

HTML/JS での使用法

アイコンをレンダリングするには、JS内で以下の関数を使用します：gl.utils.spriteIcon(iconName)

アイコンの読み込み

HAML/Rails での使い方

HAML や Rails でローディングスピナーを挿入するには、gl_loading_icon ヘルパーを使います：

= gl_loading_icon

以下の例で示すように、gl_loading_icon ヘルパーで以下のプロパティを 1 つ以上含めることができます：

  • 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 UIcomponents ライブラリはGlLoadingIcon コンポーネントを提供しています。使い方については、このコンポーネントのストーリーブックをご覧ください。

例

次のコード・スニペットは、Vue コンポーネントでGlLoadingIcon を使う方法を示しています。

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

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

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

SVGイラスト

今後は、image_tag またはimage_path ヘルパーを使用して、SVG ベースのイラストを表示するにはimg タグを使用してください。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イラストを開発したりエクスポートしたりするときは、SVGOMGのようなSVGOで動くツールで最小化してスペースを節約しましょう。GitLab SVGに追加されたイラストは自動的に最小化されるので、手動アクションは必要ありません。