Icons and SVG Illustrations

- Icons
- SVG Illustrations
  - Usage in Vue

Icons and SVG Illustrations

- Usage in HAML/Rails

Icons and SVG Illustrations

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

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

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

icon_name使用可以在 SVG Sprite 中找到的 icon_name（此处提供概述）.
size（可选）使用以下大小之一： s16 （将被翻译成s16类）

Example

= sprite_icon('issues', size: 72, css_class: 'icon-danger')

上面示例的输出

我们的组件库提供了一个用于显示精灵图标的组件.

<script>
import { GlIcon } from "@gitlab/ui";
export default {
  components: {
    GlIcon,
  },
};
<script>
<template>
  <gl-icon
    name="issues"
    :size="24"
    class="class-name"
  />

name SVG Sprite 中图标的名称（此处提供概述）.
size（可选） ，然后将大小的数字值映射到特定的 CSS 类（可用大小： sXX映射到sXX CSS 类）
class（可选）要添加到 SVG 标签的其他 CSS 类.

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

SVG Illustrations

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

Example

Component:

<script>
export default {
  props: {
    svgIllustrationPath: {
      type: String,
      required: true,
    },
  },
};
<script>
<template>
  <img :src="svgIllustrationPath" />
</template>