Commit 08eaa593 authored by Tim Zallmann's avatar Tim Zallmann Committed by Annabel Dunstone Gray

Added + Updated Document for Vue Component

parent 5b57f72d
...@@ -6,10 +6,9 @@ ...@@ -6,10 +6,9 @@
Sample configuration: Sample configuration:
<icon <icon
:img-src="userAvatarSrc" name="retry"
:img-alt="tooltipText" :size="32"
:tooltip-text="tooltipText" css-classes="top"
tooltip-placement="top"
/> />
*/ */
......
...@@ -4,15 +4,17 @@ We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are on ...@@ -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 ### 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: '')` `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) **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 **css_class (optional)** If you want to add additional css classes
**Example** **Example**
`= sprite_icon('issues', size: 72, css_class: 'icon-danger')` `= 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 : ...@@ -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>` `<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 ### 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)` `gl.utils.spriteIcon(iconName)`
## Adding a new icon to the sprite ## Adding a new icon to the sprite
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment