# Icons and SVG Illustrations

> 原文：[https://docs.gitlab.com/ee/development/fe_guide/icons.html](https://docs.gitlab.com/ee/development/fe_guide/icons.html)

*   [Icons](#icons)
    *   [Usage in HAML/Rails](#usage-in-hamlrails)
    *   [Usage in Vue](#usage-in-vue)
    *   [Usage in HTML/JS](#usage-in-htmljs)
*   [SVG Illustrations](#svg-illustrations)
    *   [Usage in HAML/Rails](#usage-in-hamlrails-1)
    *   [Usage in Vue](#usage-in-vue-1)

# Icons and SVG Illustrations[](#icons-and-svg-illustrations "Permalink")

我们在[`gitlab-svgs`](https://gitlab.com/gitlab-org/gitlab-svgs)存储库中管理自己的图标和插图库. 该存储库在[npm](https://s0www0npmjs0com.icopy.site/package/@gitlab/svgs)上发布，并通过 yarn 作为依赖项进行管理. 您可以[在此处](https://gitlab-org.gitlab.io/gitlab-svgs)浏览所有可用的图标和插图. 要升级到新版本，请运行`yarn upgrade @gitlab/svgs` .

## Icons[](#icons "Permalink")

我们正在 GitLab 中使用 SVG Sprite 使用 SVG 图标. 这意味着图标仅加载一次，并通过 ID 进行引用. 子画面 SVG 位于`/assets/icons.svg`下.

我们的目标是一一替换所有内联 SVG 图标（如目前已膨胀的 HTML）以及所有 Font Awesome 图标.

### Usage in HAML/Rails[](#usage-in-hamlrails "Permalink")

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

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

*   **icon_name**使用可以在 SVG Sprite 中找到的 icon_name（ [此处提供概述](https://gitlab-org.gitlab.io/gitlab-svgs) ）.
*   **size（可选）**使用以下大小之一： `s16` （将被翻译成`s16`类）
*   **css_class（可选）**如果要添加其他 CSS 类

**Example**

```
= 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> 
```

### Usage in Vue[](#usage-in-vue "Permalink")

我们的组件库[GitLab UI](https://gitlab-org.gitlab.io/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 Sprite 中图标的名称（ [此处提供概述](https://gitlab-org.gitlab.io/gitlab-svgs) ）.
*   **size（可选）** ，然后将大小的数字值映射到特定的 CSS 类（可用大小： `sXX`映射到`sXX` CSS 类）
*   **class（可选）**要添加到 SVG 标签的其他 CSS 类.

### Usage in HTML/JS[](#usage-in-htmljs "Permalink")

请在 JS 中使用以下函数来呈现图标： `gl.utils.spriteIcon(iconName)`

## SVG Illustrations[](#svg-illustrations "Permalink")

从现在开始，对于任何基于 SVG 的插图，请使用简单的`img`标签来显示插图，只需使用`image_tag`或`image_path`帮助器即可. 请使用周围的`svg-content`类，以确保呈现效果良好.

### Usage in HAML/Rails[](#usage-in-hamlrails-1 "Permalink")

**Example**

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

### Usage in Vue[](#usage-in-vue-1 "Permalink")

要在模板中使用 SVG 插图，请将路径作为属性提供，并通过标准`img`标签显示它.

Component:

```
<script>
export default {
  props: {
    svgIllustrationPath: {
      type: String,
      required: true,
    },
  },
};
<script>

<template>
  <img :src="svgIllustrationPath" />
</template> 
```