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