Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
0e54171c
Commit
0e54171c
authored
Feb 17, 2020
by
Martin Wortschack
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'update-icons-doc' into 'master'
Update icons documentation See merge request gitlab-org/gitlab!25350
parents
2ab97d54
73a1b86f
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
9 additions
and
7 deletions
+9
-7
doc/development/fe_guide/icons.md
doc/development/fe_guide/icons.md
+9
-7
No files found.
doc/development/fe_guide/icons.md
View file @
0e54171c
...
@@ -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
,
Gl
Icon
,
},
},
};
};
<
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/
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment