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