Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
W
web-monitor
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
web-monitor
Commits
79eeed7d
Commit
79eeed7d
authored
May 24, 2019
by
Pan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat[SvgIcon]: support import svg from url
parent
fa731090
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
20 additions
and
1 deletion
+20
-1
index.vue
src/components/SvgIcon/index.vue
+20
-1
No files found.
src/components/SvgIcon/index.vue
View file @
79eeed7d
<
template
>
<svg
:class=
"svgClass"
aria-hidden=
"true"
v-on=
"$listeners"
>
<div
v-if=
"isExternal"
:style=
"styleExternalIcon"
class=
"svg-external-icon svg-icon"
v-on=
"$listeners"
/>
<svg
v-else
:class=
"svgClass"
aria-hidden=
"true"
v-on=
"$listeners"
>
<use
:xlink:href=
"iconName"
/>
</svg>
</
template
>
<
script
>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import
{
isExternal
}
from
'@/utils/validate'
export
default
{
name
:
'SvgIcon'
,
props
:
{
...
...
@@ -18,6 +22,9 @@ export default {
}
},
computed
:
{
isExternal
()
{
return
isExternal
(
this
.
iconClass
)
},
iconName
()
{
return
`#icon-
${
this
.
iconClass
}
`
},
...
...
@@ -27,6 +34,12 @@ export default {
}
else
{
return
'svg-icon'
}
},
styleExternalIcon
()
{
return
{
mask
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
,
'-webkit-mask'
:
`url(
${
this
.
iconClass
}
) no-repeat 50% 50%`
}
}
}
}
...
...
@@ -40,4 +53,10 @@ export default {
fill
:
currentColor
;
overflow
:
hidden
;
}
.svg-external-icon
{
background-color
:
currentColor
;
mask-size
:
cover
!important
;
display
:
inline-block
;
}
</
style
>
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