Help us learn about your current experience with the documentation. Take the survey.

图标和 SVG 插图

我们在 gitlab-svgs 仓库中管理自己的图标和插图库。该仓库发布在 npm 上，并作为依赖项通过 yarn 管理。您可以浏览所有可用的图标和插图。要升级到新版本，请运行 yarn upgrade @gitlab/svgs。

图标

我们使用 SVG Sprite 在 GitLab 中使用 SVG 图标。这意味着图标只加载一次，并通过 ID 引用。sprite SVG 位于 /assets/icons.svg。

在 HAML/Rails 中的使用

要在 HAML 或 Rails 中使用 sprite 图标，我们使用特定的辅助函数：

sprite_icon(icon_name, size: nil, css_class: '')

icon_name: 在 (GitLab SVGs) 列表中使用 sprite 的 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，我们的组件库，提供了一个用于显示 sprite 图标的组件。

示例用法：

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

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

<template>
  <gl-icon
    name="issues"
    :size="24"
    class="class-name"
  />
</template>

name: SVG sprite 图标的名称，如 (GitLab SVG Previewer) 中所列。
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 路径从 Rails 传递下来。我们可以直接在 Vue 中导入 SVG 插图，而不是通过 Rails => Haml => Vue 的方式。

要在模板中使用 SVG 插图，请从 @gitlab/svgs 导入 SVG。您可以通过 GitLab SVG Previewer 查找可用的 SVG 路径。

以下是导入 SVG 插图并与 GlEmptyState 组件一起使用的示例。

组件：

<script>
import { GlEmptyState } from '@gitlab/ui';
// ?url 查询字符串确保 SVG 作为 URL 而不是内联 SVG 导入
// 这对包大小和优化加载很有用
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 插图时，请使用 SVGO 驱动的工具（如 SVGOMG）来最小化 SVG 以节省空间。添加到 GitLab SVG 的插图会自动最小化，因此无需手动操作。