diff options
| author | Tim Zallmann <tzallmann@gitlab.com> | 2017-11-03 09:44:00 +0100 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-11-16 08:41:59 -0700 |
| commit | 08eaa59359ff1afc8ecac5b942d0f5b355cb8df4 (patch) | |
| tree | 8d8cca0faecfcf297c09944d6b1cafd56e4b7cd9 /doc | |
| parent | 5b57f72de9800df2263bf634bfef6893c3c6538c (diff) | |
| download | gitlab-ce-08eaa59359ff1afc8ecac5b942d0f5b355cb8df4.tar.gz | |
Added + Updated Document for Vue Component
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/fe_guide/icons.md | 28 |
1 files changed, 24 insertions, 4 deletions
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md index cef62618a3c..382c7311905 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,9 +22,27 @@ 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 |