Created
October 1, 2019 19:50
-
-
Save toadkicker/bcd353fbfd9a2afa75b64db2493f73bb to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <component class="svg-inline--icon" :is="dynamicIcon" /> | |
| </template> | |
| <script> | |
| export default { | |
| name: 'Icon', | |
| props: { | |
| icon: { | |
| type: String, | |
| required: true | |
| } | |
| }, | |
| computed: { | |
| dynamicIcon() { | |
| return () => | |
| import( | |
| /* webpackChunkName: "icons" */ | |
| /* webpackMode: "lazy-once" */ | |
| `~/assets/icons/${this.icon}.svg` | |
| ) | |
| } | |
| } | |
| } | |
| </script> | |
| <style scoped> | |
| svg:not(:root).svg-inline--icon { | |
| overflow: visible; | |
| } | |
| .svg-inline--icon { | |
| display: inline-block; | |
| font-size: inherit; | |
| height: 1em; | |
| overflow: visible; | |
| vertical-align: -0.125em; | |
| } | |
| .svg-inline--icon.icon-lg { | |
| vertical-align: -0.225em; | |
| } | |
| .svg-inline--icon.icon-w-1 { | |
| width: 0.0625em; | |
| } | |
| .svg-inline--icon.icon-w-2 { | |
| width: 0.125em; | |
| } | |
| .svg-inline--icon.icon-w-3 { | |
| width: 0.1875em; | |
| } | |
| .svg-inline--icon.icon-w-4 { | |
| width: 0.25em; | |
| } | |
| .svg-inline--icon.icon-w-5 { | |
| width: 0.3125em; | |
| } | |
| .svg-inline--icon.icon-w-6 { | |
| width: 0.375em; | |
| } | |
| .svg-inline--icon.icon-w-7 { | |
| width: 0.4375em; | |
| } | |
| .svg-inline--icon.icon-w-8 { | |
| width: 0.5em; | |
| } | |
| .svg-inline--icon.icon-w-9 { | |
| width: 0.5625em; | |
| } | |
| .svg-inline--icon.icon-w-10 { | |
| width: 0.625em; | |
| } | |
| .svg-inline--icon.icon-w-11 { | |
| width: 0.6875em; | |
| } | |
| .svg-inline--icon.icon-w-12 { | |
| width: 0.75em; | |
| } | |
| .svg-inline--icon.icon-w-13 { | |
| width: 0.8125em; | |
| } | |
| .svg-inline--icon.icon-w-14 { | |
| width: 0.875em; | |
| } | |
| .svg-inline--icon.icon-w-15 { | |
| width: 0.9375em; | |
| } | |
| .svg-inline--icon.icon-w-16 { | |
| width: 1em; | |
| } | |
| .svg-inline--icon.icon-w-17 { | |
| width: 1.0625em; | |
| } | |
| .svg-inline--icon.icon-w-18 { | |
| width: 1.125em; | |
| } | |
| .svg-inline--icon.icon-w-19 { | |
| width: 1.1875em; | |
| } | |
| .svg-inline--icon.icon-w-20 { | |
| width: 1.25em; | |
| } | |
| .svg-inline--icon.icon-pull-left { | |
| margin-right: 0.3em; | |
| width: auto; | |
| } | |
| .svg-inline--icon.icon-pull-right { | |
| margin-left: 0.3em; | |
| width: auto; | |
| } | |
| .svg-inline--icon.icon-border { | |
| height: 1.5em; | |
| } | |
| .svg-inline--icon.icon-li { | |
| width: 2em; | |
| } | |
| .svg-inline--icon.icon-fw { | |
| width: 1.25em; | |
| } | |
| .icon-layers svg.svg-inline--icon { | |
| bottom: 0; | |
| left: 0; | |
| margin: auto; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| } | |
| .icon-layers { | |
| display: inline-block; | |
| height: 1em; | |
| position: relative; | |
| text-align: center; | |
| vertical-align: -0.125em; | |
| width: 1em; | |
| } | |
| .icon-layers svg.svg-inline--icon { | |
| -webkit-transform-origin: center center; | |
| transform-origin: center center; | |
| } | |
| .icon-layers-text, | |
| .icon-layers-counter { | |
| display: inline-block; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| .icon-layers-text { | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| -webkit-transform-origin: center center; | |
| transform-origin: center center; | |
| } | |
| .icon-layers-counter { | |
| background-color: #ff253a; | |
| border-radius: 1em; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| color: #fff; | |
| height: 1.5em; | |
| line-height: 1; | |
| max-width: 5em; | |
| min-width: 1.5em; | |
| overflow: hidden; | |
| padding: 0.25em; | |
| right: 0; | |
| text-overflow: ellipsis; | |
| top: 0; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -webkit-transform-origin: top right; | |
| transform-origin: top right; | |
| } | |
| .icon-layers-bottom-right { | |
| bottom: 0; | |
| right: 0; | |
| top: auto; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -webkit-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| } | |
| .icon-layers-bottom-left { | |
| bottom: 0; | |
| left: 0; | |
| right: auto; | |
| top: auto; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -webkit-transform-origin: bottom left; | |
| transform-origin: bottom left; | |
| } | |
| .icon-layers-top-right { | |
| right: 0; | |
| top: 0; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -webkit-transform-origin: top right; | |
| transform-origin: top right; | |
| } | |
| .icon-layers-top-left { | |
| left: 0; | |
| right: auto; | |
| top: 0; | |
| -webkit-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -webkit-transform-origin: top left; | |
| transform-origin: top left; | |
| } | |
| .icon-lg { | |
| font-size: 1.33333em; | |
| line-height: 0.75em; | |
| vertical-align: -0.0667em; | |
| } | |
| .icon-xs { | |
| font-size: 0.75em; | |
| } | |
| .icon-sm { | |
| font-size: 0.875em; | |
| } | |
| .icon-1x { | |
| font-size: 1em; | |
| } | |
| .icon-2x { | |
| font-size: 2em; | |
| } | |
| .icon-3x { | |
| font-size: 3em; | |
| } | |
| .icon-4x { | |
| font-size: 4em; | |
| } | |
| .icon-5x { | |
| font-size: 5em; | |
| } | |
| .icon-6x { | |
| font-size: 6em; | |
| } | |
| .icon-7x { | |
| font-size: 7em; | |
| } | |
| .icon-8x { | |
| font-size: 8em; | |
| } | |
| .icon-9x { | |
| font-size: 9em; | |
| } | |
| .icon-10x { | |
| font-size: 10em; | |
| } | |
| .icon-fw { | |
| text-align: center; | |
| width: 1.25em; | |
| } | |
| .icon-ul { | |
| list-style-type: none; | |
| margin-left: 2.5em; | |
| padding-left: 0; | |
| } | |
| .icon-ul > li { | |
| position: relative; | |
| } | |
| .icon-li { | |
| left: -2em; | |
| position: absolute; | |
| text-align: center; | |
| width: 2em; | |
| line-height: inherit; | |
| } | |
| .icon-border { | |
| border: solid 0.08em #eee; | |
| border-radius: 0.1em; | |
| padding: 0.2em 0.25em 0.15em; | |
| } | |
| .icon-pull-left { | |
| float: left; | |
| } | |
| .icon-pull-right { | |
| float: right; | |
| } | |
| .icon.icon-pull-left { | |
| margin-right: 0.3em; | |
| } | |
| .icon.icon-pull-right { | |
| margin-left: 0.3em; | |
| } | |
| .icon-spin { | |
| -webkit-animation: icon-spin 2s infinite linear; | |
| animation: icon-spin 2s infinite linear; | |
| } | |
| .icon-pulse { | |
| -webkit-animation: icon-spin 1s infinite steps(8); | |
| animation: icon-spin 1s infinite steps(8); | |
| } | |
| @-webkit-keyframes icon-spin { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes icon-spin { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .icon-rotate-90 { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; | |
| -webkit-transform: rotate(90deg); | |
| transform: rotate(90deg); | |
| } | |
| .icon-rotate-180 { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; | |
| -webkit-transform: rotate(180deg); | |
| transform: rotate(180deg); | |
| } | |
| .icon-rotate-270 { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; | |
| -webkit-transform: rotate(270deg); | |
| transform: rotate(270deg); | |
| } | |
| .icon-flip-horizontal { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)'; | |
| -webkit-transform: scale(-1, 1); | |
| transform: scale(-1, 1); | |
| } | |
| .icon-flip-vertical { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; | |
| -webkit-transform: scale(1, -1); | |
| transform: scale(1, -1); | |
| } | |
| .icon-flip-horizontal.icon-flip-vertical { | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; | |
| -webkit-transform: scale(-1, -1); | |
| transform: scale(-1, -1); | |
| } | |
| :root .icon-rotate-90, | |
| :root .icon-rotate-180, | |
| :root .icon-rotate-270, | |
| :root .icon-flip-horizontal, | |
| :root .icon-flip-vertical { | |
| -webkit-filter: none; | |
| filter: none; | |
| } | |
| .icon-stack { | |
| display: inline-block; | |
| height: 2em; | |
| position: relative; | |
| width: 2em; | |
| } | |
| .icon-stack-1x, | |
| .icon-stack-2x { | |
| bottom: 0; | |
| left: 0; | |
| margin: auto; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| } | |
| .svg-inline--icon.icon-stack-1x { | |
| height: 1em; | |
| width: 1em; | |
| } | |
| .svg-inline--icon.icon-stack-2x { | |
| height: 2em; | |
| width: 2em; | |
| } | |
| .icon-inverse { | |
| color: #fff; | |
| } | |
| .sr-only { | |
| border: 0; | |
| clip: rect(0, 0, 0, 0); | |
| height: 1px; | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| } | |
| .sr-only-focusable:active, | |
| .sr-only-focusable:focus { | |
| clip: auto; | |
| height: auto; | |
| margin: 0; | |
| overflow: visible; | |
| position: static; | |
| width: auto; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment