diff options
Diffstat (limited to 'doc/development/fe_guide/icons.md')
-rw-r--r-- | doc/development/fe_guide/icons.md | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md index d81a520c5f3..36537a22e67 100644 --- a/doc/development/fe_guide/icons.md +++ b/doc/development/fe_guide/icons.md @@ -42,25 +42,25 @@ sprite_icon(icon_name, size: nil, css_class: '') ### 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 : -```javascript +```html <script> -import Icon from "~/vue_shared/components/icon.vue" +import { GlIcon } from "@gitlab/ui"; export default { components: { - Icon, + GlIcon, }, }; <script> + <template> - <icon + <gl-icon name="issues" :size="24" - class="icon-danger" /> </template> ``` @@ -95,7 +95,7 @@ To use an SVG illustrations in a template provide the path as a property and dis Component: -```js +```html <script> export default { props: { @@ -106,6 +106,7 @@ export default { }, }; <script> + <template> <img :src="svgIllustrationPath" /> </template> @@ -114,3 +115,4 @@ export default { [npm]: https://www.npmjs.com/package/@gitlab/svgs [gitlab-svgs]: https://gitlab.com/gitlab-org/gitlab-svgs [svg-preview]: https://gitlab-org.gitlab.io/gitlab-svgs +[gitlab-ui]: https://gitlab-org.gitlab.io/gitlab-ui/ |