API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 20th, 2019
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.30 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <component class="svg-inline--icon" :is="dynamicIcon" />
  3. </template>
  4.  
  5. <script>
  6. export default {
  7. name: 'Icon',
  8. props: {
  9. icon: {
  10. type: String,
  11. required: true
  12. }
  13. },
  14. computed: {
  15. dynamicIcon() {
  16. return () =>
  17. import(
  18. /* webpackChunkName: "icons" */
  19. /* webpackMode: "lazy-once" */
  20. `~/assets/icons/${this.icon}.svg`
  21. )
  22. }
  23. }
  24. }
  25. </script>
  26. <style scoped>
  27. svg:not(:root).svg-inline--icon {
  28. overflow: visible;
  29. }
  30.  
  31. .svg-inline--icon {
  32. display: inline-block;
  33. font-size: inherit;
  34. height: 1em;
  35. overflow: visible;
  36. vertical-align: -0.125em;
  37. }
  38.  
  39. .svg-inline--icon.icon-lg {
  40. vertical-align: -0.225em;
  41. }
  42.  
  43. .svg-inline--icon.icon-w-1 {
  44. width: 0.0625em;
  45. }
  46.  
  47. .svg-inline--icon.icon-w-2 {
  48. width: 0.125em;
  49. }
  50.  
  51. .svg-inline--icon.icon-w-3 {
  52. width: 0.1875em;
  53. }
  54.  
  55. .svg-inline--icon.icon-w-4 {
  56. width: 0.25em;
  57. }
  58.  
  59. .svg-inline--icon.icon-w-5 {
  60. width: 0.3125em;
  61. }
  62.  
  63. .svg-inline--icon.icon-w-6 {
  64. width: 0.375em;
  65. }
  66.  
  67. .svg-inline--icon.icon-w-7 {
  68. width: 0.4375em;
  69. }
  70.  
  71. .svg-inline--icon.icon-w-8 {
  72. width: 0.5em;
  73. }
  74.  
  75. .svg-inline--icon.icon-w-9 {
  76. width: 0.5625em;
  77. }
  78.  
  79. .svg-inline--icon.icon-w-10 {
  80. width: 0.625em;
  81. }
  82.  
  83. .svg-inline--icon.icon-w-11 {
  84. width: 0.6875em;
  85. }
  86.  
  87. .svg-inline--icon.icon-w-12 {
  88. width: 0.75em;
  89. }
  90.  
  91. .svg-inline--icon.icon-w-13 {
  92. width: 0.8125em;
  93. }
  94.  
  95. .svg-inline--icon.icon-w-14 {
  96. width: 0.875em;
  97. }
  98.  
  99. .svg-inline--icon.icon-w-15 {
  100. width: 0.9375em;
  101. }
  102.  
  103. .svg-inline--icon.icon-w-16 {
  104. width: 1em;
  105. }
  106.  
  107. .svg-inline--icon.icon-w-17 {
  108. width: 1.0625em;
  109. }
  110.  
  111. .svg-inline--icon.icon-w-18 {
  112. width: 1.125em;
  113. }
  114.  
  115. .svg-inline--icon.icon-w-19 {
  116. width: 1.1875em;
  117. }
  118.  
  119. .svg-inline--icon.icon-w-20 {
  120. width: 1.25em;
  121. }
  122.  
  123. .svg-inline--icon.icon-pull-left {
  124. margin-right: 0.3em;
  125. width: auto;
  126. }
  127.  
  128. .svg-inline--icon.icon-pull-right {
  129. margin-left: 0.3em;
  130. width: auto;
  131. }
  132.  
  133. .svg-inline--icon.icon-border {
  134. height: 1.5em;
  135. }
  136.  
  137. .svg-inline--icon.icon-li {
  138. width: 2em;
  139. }
  140.  
  141. .svg-inline--icon.icon-fw {
  142. width: 1.25em;
  143. }
  144.  
  145. .icon-layers svg.svg-inline--icon {
  146. bottom: 0;
  147. left: 0;
  148. margin: auto;
  149. position: absolute;
  150. right: 0;
  151. top: 0;
  152. }
  153.  
  154. .icon-layers {
  155. display: inline-block;
  156. height: 1em;
  157. position: relative;
  158. text-align: center;
  159. vertical-align: -0.125em;
  160. width: 1em;
  161. }
  162.  
  163. .icon-layers svg.svg-inline--icon {
  164. -webkit-transform-origin: center center;
  165. transform-origin: center center;
  166. }
  167.  
  168. .icon-layers-text,
  169. .icon-layers-counter {
  170. display: inline-block;
  171. position: absolute;
  172. text-align: center;
  173. }
  174.  
  175. .icon-layers-text {
  176. left: 50%;
  177. top: 50%;
  178. -webkit-transform: translate(-50%, -50%);
  179. transform: translate(-50%, -50%);
  180. -webkit-transform-origin: center center;
  181. transform-origin: center center;
  182. }
  183.  
  184. .icon-layers-counter {
  185. background-color: #ff253a;
  186. border-radius: 1em;
  187. -webkit-box-sizing: border-box;
  188. box-sizing: border-box;
  189. color: #fff;
  190. height: 1.5em;
  191. line-height: 1;
  192. max-width: 5em;
  193. min-width: 1.5em;
  194. overflow: hidden;
  195. padding: 0.25em;
  196. right: 0;
  197. text-overflow: ellipsis;
  198. top: 0;
  199. -webkit-transform: scale(0.25);
  200. transform: scale(0.25);
  201. -webkit-transform-origin: top right;
  202. transform-origin: top right;
  203. }
  204.  
  205. .icon-layers-bottom-right {
  206. bottom: 0;
  207. right: 0;
  208. top: auto;
  209. -webkit-transform: scale(0.25);
  210. transform: scale(0.25);
  211. -webkit-transform-origin: bottom right;
  212. transform-origin: bottom right;
  213. }
  214.  
  215. .icon-layers-bottom-left {
  216. bottom: 0;
  217. left: 0;
  218. right: auto;
  219. top: auto;
  220. -webkit-transform: scale(0.25);
  221. transform: scale(0.25);
  222. -webkit-transform-origin: bottom left;
  223. transform-origin: bottom left;
  224. }
  225.  
  226. .icon-layers-top-right {
  227. right: 0;
  228. top: 0;
  229. -webkit-transform: scale(0.25);
  230. transform: scale(0.25);
  231. -webkit-transform-origin: top right;
  232. transform-origin: top right;
  233. }
  234.  
  235. .icon-layers-top-left {
  236. left: 0;
  237. right: auto;
  238. top: 0;
  239. -webkit-transform: scale(0.25);
  240. transform: scale(0.25);
  241. -webkit-transform-origin: top left;
  242. transform-origin: top left;
  243. }
  244.  
  245. .icon-lg {
  246. font-size: 1.33333em;
  247. line-height: 0.75em;
  248. vertical-align: -0.0667em;
  249. }
  250.  
  251. .icon-xs {
  252. font-size: 0.75em;
  253. }
  254.  
  255. .icon-sm {
  256. font-size: 0.875em;
  257. }
  258.  
  259. .icon-1x {
  260. font-size: 1em;
  261. }
  262.  
  263. .icon-2x {
  264. font-size: 2em;
  265. }
  266.  
  267. .icon-3x {
  268. font-size: 3em;
  269. }
  270.  
  271. .icon-4x {
  272. font-size: 4em;
  273. }
  274.  
  275. .icon-5x {
  276. font-size: 5em;
  277. }
  278.  
  279. .icon-6x {
  280. font-size: 6em;
  281. }
  282.  
  283. .icon-7x {
  284. font-size: 7em;
  285. }
  286.  
  287. .icon-8x {
  288. font-size: 8em;
  289. }
  290.  
  291. .icon-9x {
  292. font-size: 9em;
  293. }
  294.  
  295. .icon-10x {
  296. font-size: 10em;
  297. }
  298.  
  299. .icon-fw {
  300. text-align: center;
  301. width: 1.25em;
  302. }
  303.  
  304. .icon-ul {
  305. list-style-type: none;
  306. margin-left: 2.5em;
  307. padding-left: 0;
  308. }
  309.  
  310. .icon-ul > li {
  311. position: relative;
  312. }
  313.  
  314. .icon-li {
  315. left: -2em;
  316. position: absolute;
  317. text-align: center;
  318. width: 2em;
  319. line-height: inherit;
  320. }
  321.  
  322. .icon-border {
  323. border: solid 0.08em #eee;
  324. border-radius: 0.1em;
  325. padding: 0.2em 0.25em 0.15em;
  326. }
  327.  
  328. .icon-pull-left {
  329. float: left;
  330. }
  331.  
  332. .icon-pull-right {
  333. float: right;
  334. }
  335.  
  336. .icon.icon-pull-left {
  337. margin-right: 0.3em;
  338. }
  339.  
  340. .icon.icon-pull-right {
  341. margin-left: 0.3em;
  342. }
  343.  
  344. .icon-spin {
  345. -webkit-animation: icon-spin 2s infinite linear;
  346. animation: icon-spin 2s infinite linear;
  347. }
  348.  
  349. .icon-pulse {
  350. -webkit-animation: icon-spin 1s infinite steps(8);
  351. animation: icon-spin 1s infinite steps(8);
  352. }
  353.  
  354. @-webkit-keyframes icon-spin {
  355. 0% {
  356. -webkit-transform: rotate(0deg);
  357. transform: rotate(0deg);
  358. }
  359. 100% {
  360. -webkit-transform: rotate(360deg);
  361. transform: rotate(360deg);
  362. }
  363. }
  364.  
  365. @keyframes icon-spin {
  366. 0% {
  367. -webkit-transform: rotate(0deg);
  368. transform: rotate(0deg);
  369. }
  370. 100% {
  371. -webkit-transform: rotate(360deg);
  372. transform: rotate(360deg);
  373. }
  374. }
  375.  
  376. .icon-rotate-90 {
  377. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
  378. -webkit-transform: rotate(90deg);
  379. transform: rotate(90deg);
  380. }
  381.  
  382. .icon-rotate-180 {
  383. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
  384. -webkit-transform: rotate(180deg);
  385. transform: rotate(180deg);
  386. }
  387.  
  388. .icon-rotate-270 {
  389. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
  390. -webkit-transform: rotate(270deg);
  391. transform: rotate(270deg);
  392. }
  393.  
  394. .icon-flip-horizontal {
  395. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
  396. -webkit-transform: scale(-1, 1);
  397. transform: scale(-1, 1);
  398. }
  399.  
  400. .icon-flip-vertical {
  401. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
  402. -webkit-transform: scale(1, -1);
  403. transform: scale(1, -1);
  404. }
  405.  
  406. .icon-flip-horizontal.icon-flip-vertical {
  407. -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
  408. -webkit-transform: scale(-1, -1);
  409. transform: scale(-1, -1);
  410. }
  411.  
  412. :root .icon-rotate-90,
  413. :root .icon-rotate-180,
  414. :root .icon-rotate-270,
  415. :root .icon-flip-horizontal,
  416. :root .icon-flip-vertical {
  417. -webkit-filter: none;
  418. filter: none;
  419. }
  420.  
  421. .icon-stack {
  422. display: inline-block;
  423. height: 2em;
  424. position: relative;
  425. width: 2em;
  426. }
  427.  
  428. .icon-stack-1x,
  429. .icon-stack-2x {
  430. bottom: 0;
  431. left: 0;
  432. margin: auto;
  433. position: absolute;
  434. right: 0;
  435. top: 0;
  436. }
  437.  
  438. .svg-inline--icon.icon-stack-1x {
  439. height: 1em;
  440. width: 1em;
  441. }
  442.  
  443. .svg-inline--icon.icon-stack-2x {
  444. height: 2em;
  445. width: 2em;
  446. }
  447.  
  448. .icon-inverse {
  449. color: #fff;
  450. }
  451.  
  452. .sr-only {
  453. border: 0;
  454. clip: rect(0, 0, 0, 0);
  455. height: 1px;
  456. margin: -1px;
  457. overflow: hidden;
  458. padding: 0;
  459. position: absolute;
  460. width: 1px;
  461. }
  462.  
  463. .sr-only-focusable:active,
  464. .sr-only-focusable:focus {
  465. clip: auto;
  466. height: auto;
  467. margin: 0;
  468. overflow: visible;
  469. position: static;
  470. width: auto;
  471. }
  472. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!