Merge branch '38451-fe-sprite-icons-vue-component' into 'master'

Update Icons Documentation about Icon Vue Component

Closes #38451

See merge request gitlab-org/gitlab-ce!15171

2 files changed, 28 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 2e5f9f1088f..8f116233e72 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -6,10 +6,9 @@
   Sample configuration:
 
   <icon
-    :img-src="userAvatarSrc"
-    :img-alt="tooltipText"
-    :tooltip-text="tooltipText"
-    tooltip-placement="top"
+    name="retry"
+    :size="32"
+    css-classes="top"
   />
 
 */
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md
index cef62618a3c..b288ee95722 100644
--- a/doc/development/fe_guide/icons.md
+++ b/doc/development/fe_guide/icons.md
@@ -4,15 +4,17 @@ We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are on
 
 ### Usage in HAML/Rails
 
-To use a sprite Icon in HAML or Rails we use a specific helper function : 
+To use a sprite Icon in HAML or Rails we use a specific helper function :
 
 `sprite_icon(icon_name, size: nil, css_class: '')`
 
-**icon_name** Use the icon_name that you can find in the SVG Sprite (Overview is available under `/assets/sprite.symbol.html`).
+**icon_name** Use the icon_name that you can find in the SVG Sprite ([Overview is available here](http://gitlab-org.gitlab.io/gitlab-svgs/)`).
+
 **size (optional)** Use one of the following sizes : 16,24,32,48,72 (this will be translated into a `s16` class)
+
 **css_class (optional)** If you want to add additional css classes
 
-**Example** 
+**Example**
 
 `= sprite_icon('issues', size: 72, css_class: 'icon-danger')`
 
@@ -20,16 +22,34 @@ To use a sprite Icon in HAML or Rails we use a specific helper function :
 
 `<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
+
+We have a special Vue component for our sprite icons in `\vue_shared\components\icon.vue`.
+
+Sample usage :
+
+`<icon
+    name="retry"
+    :size="32"
+    css-classes="top"
+  />`
+
+**name** Name of the Icon in the SVG Sprite  ([Overview is available here](http://gitlab-org.gitlab.io/gitlab-svgs/)`).
+
+**size (optional)** Number value for the size which is then mapped to a specific CSS class (Available Sizes: 8,12,16,18,24,32,48,72 are mapped to `sXX` css classes)
+
+**css-classes (optional)** Additional CSS Classes to add to the svg tag.
+
 ### Usage in HTML/JS
 
-Please use the following function inside JS to render an icon : 
+Please use the following function inside JS to render an icon :
 `gl.utils.spriteIcon(iconName)`
 
 ## Adding a new icon to the sprite
 
 All Icons and Illustrations are managed in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository which is added as a dev-dependency.
 
-To upgrade to a new SVG Sprite version run `yarn upgrade @gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders.
+To upgrade to a new SVG Sprite version run `yarn upgrade @gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders. The updated files should be tracked in Git as those are referenced.
 
 # SVG Illustrations