Icons and SVG Illustrations

原文：https://docs.gitlab.com/ee/development/fe_guide/icons.html

• Icons

  • Usage in HAML/Rails
  • Usage in Vue
  • Usage in HTML/JS

• SVG Illustrations

  • Usage in HAML/Rails
  • Usage in Vue

Icons and SVG Illustrations

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

Icons

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

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

Usage in HAML/Rails

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

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

• icon_name使用可以在 SVG Sprite 中找到的 icon_name（ 此处提供概述 ）.
• 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

我们的组件库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 中图标的名称（ 此处提供概述 ）.
• size（可选） ，然后将大小的数字值映射到特定的 CSS 类（可用大小： sXX映射到sXX CSS 类）
• class（可选）要添加到 SVG 标签的其他 CSS 类.

Usage in HTML/JS

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

SVG Illustrations

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

Usage in HAML/Rails

Example

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

Usage in Vue

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

Component:

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

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