diff options
Diffstat (limited to 'doc/development/fe_guide/icons.md')
| -rw-r--r-- | doc/development/fe_guide/icons.md | 17 |
1 files changed, 6 insertions, 11 deletions
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md index ea321330c41..4fb738f5466 100644 --- a/doc/development/fe_guide/icons.md +++ b/doc/development/fe_guide/icons.md @@ -1,8 +1,8 @@ # Icons and SVG Illustrations -We manage our own Icon and Illustration library in the [`gitlab-svgs`][gitlab-svgs] repository. -This repository is published on [npm][npm] and managed as a dependency via yarn. -You can browse all available Icons and Illustrations [here][svg-preview]. +We manage our own Icon and Illustration library in the [`gitlab-svgs`](https://gitlab.com/gitlab-org/gitlab-svgs) repository. +This repository is published on [npm](https://www.npmjs.com/package/@gitlab/svgs) and managed as a dependency via yarn. +You can browse all available Icons and Illustrations [here](https://gitlab-org.gitlab.io/gitlab-svgs). To upgrade to a new version run `yarn upgrade @gitlab/svgs`. ## Icons @@ -22,7 +22,7 @@ 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 here][svg-preview]). + ([Overview is available here](https://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 @@ -42,7 +42,7 @@ sprite_icon(icon_name, size: nil, css_class: '') ### Usage in Vue -[GitLab UI][gitlab-ui], our components library, provides a component to display sprite icons. +[GitLab UI](https://gitlab-org.gitlab.io/gitlab-ui/), our components library, provides a component to display sprite icons. Sample usage : @@ -65,7 +65,7 @@ export default { </template> ``` -- **name** Name of the Icon in the SVG Sprite ([Overview is available here][svg-preview]). +- **name** Name of the Icon in the SVG Sprite ([Overview is available here](https://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. @@ -111,8 +111,3 @@ export default { <img :src="svgIllustrationPath" /> </template> ``` - -[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/ |