summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
authorAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2017-11-20 15:14:37 +0000
committerAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2017-11-20 15:14:37 +0000
commit9414bb00c40bb0fe157057dec497bc70df6db11e (patch)
tree643daa59188b08451c8e26915b4f481a21826d5d /doc
parent190ea021cd1fd89d20c9548a72034a7b941413ca (diff)
parent245d0daddef23427d9b1aa206dbedf5b9cc89b34 (diff)
downloadgitlab-ce-9414bb00c40bb0fe157057dec497bc70df6db11e.tar.gz
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
Diffstat (limited to 'doc')
-rw-r--r--doc/development/fe_guide/icons.md30
1 files changed, 25 insertions, 5 deletions
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