Update icons documentation

parent 0c739683
...@@ -42,25 +42,25 @@ sprite_icon(icon_name, size: nil, css_class: '') ...@@ -42,25 +42,25 @@ sprite_icon(icon_name, size: nil, css_class: '')
### Usage in Vue ### Usage in Vue
We have a special Vue component for our sprite icons in `\vue_shared\components\icon.vue`. [GitLab UI][gitlab-ui], our components library, provides a component to display sprite icons.
Sample usage : Sample usage :
```javascript ```html
<script> <script>
import Icon from "~/vue_shared/components/icon.vue" import { GlIcon } from "@gitlab/ui";
export default { export default {
components: { components: {
Icon, GlIcon,
}, },
}; };
<script> <script>
<template> <template>
<icon <gl-icon
name="issues" name="issues"
:size="24" :size="24"
class="icon-danger"
/> />
</template> </template>
``` ```
...@@ -95,7 +95,7 @@ To use an SVG illustrations in a template provide the path as a property and dis ...@@ -95,7 +95,7 @@ To use an SVG illustrations in a template provide the path as a property and dis
Component: Component:
```js ```html
<script> <script>
export default { export default {
props: { props: {
...@@ -106,6 +106,7 @@ export default { ...@@ -106,6 +106,7 @@ export default {
}, },
}; };
<script> <script>
<template> <template>
<img :src="svgIllustrationPath" /> <img :src="svgIllustrationPath" />
</template> </template>
...@@ -114,3 +115,4 @@ export default { ...@@ -114,3 +115,4 @@ export default {
[npm]: https://www.npmjs.com/package/@gitlab/svgs [npm]: https://www.npmjs.com/package/@gitlab/svgs
[gitlab-svgs]: https://gitlab.com/gitlab-org/gitlab-svgs [gitlab-svgs]: https://gitlab.com/gitlab-org/gitlab-svgs
[svg-preview]: https://gitlab-org.gitlab.io/gitlab-svgs [svg-preview]: https://gitlab-org.gitlab.io/gitlab-svgs
[gitlab-ui]: https://gitlab-org.gitlab.io/gitlab-ui/
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