Commit 4b8ead7c4ea09911df07aca44161614d5bf1d228
1 parent
01c7288c
Exists in
master
[新增] 图标
Showing
13 changed files
with
287 additions
and
0 deletions
Show diff stats
| @@ -0,0 +1,49 @@ | @@ -0,0 +1,49 @@ | ||
| 1 | +@font-face {font-family: "iconfont"; | ||
| 2 | + src: url('iconfont.eot?t=1584011049763'); /* IE9 */ | ||
| 3 | + src: url('iconfont.eot?t=1584011049763#iefix') format('embedded-opentype'), /* IE6-IE8 */ | ||
| 4 | + url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAS4AAsAAAAACegAAARpAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCECgqFRIRfATYCJAMkCxQABCAFhG0HgRsbpggRlZyDyX4cOGfZYaXOtU6k6gWSrhwEz3863+6bkWxpFCAyBJhlBZCqHI3T4RJ1QCGqwhWC/2LRGLYDVgMEEITdnOZegBigLPi0i0+uOPKIh3yyfh0vw0WoALaA9eePJV9ZAuazb+eSlRQJeHxAB5a9zYvONrACmU8Ut8guYo9e9OMQwNCBPDJpyqwQDwdYJYBs37JpDV5Kj1NTKngIqZKDDvIOLp46qh4Db/s/LxUGiAcKVwNPmrdx8nrGlYfW9mubWJZrix3OCgjHQAN5wAH5rNT+ATqM59EY7e86bAaa0AiNKg8tHy4/q5yo/Fc9r9Zq+5ME+WYwSmhC/skDQaFxcEmRxgNJQRfXA2A3K/MOVmAjCJQPa1GM4hmNoKFyAsGByn8ILlQDhBRUawhpqO2vwwPAdxc2AZoBD0DKnDDJl+uLwjhTNQrxnTYZrV3AOO/Dd7LpVLDv+O3irWM37M1Q11ch9rlpcOyluMVXQcPjL6Deseco+yLYdO3Bk7vY1yFGSqUoeBMcfybFqGTfoW6qBLx509mUzLHH2G1bGm1b33BfoEwULipQb2UhNHpXGEn9VY1phDRmN4XZec2+42eKp499Z08ZqceuUyj7fFKfGFVvYkx9rQqcauyp42dEf2UqNhUXRWO3rVFGr15bWLMO94pD9VW0PgoXbCosOjW2zcJhCwfZG97eEp4OM4Vsl4Fdwm5NKW+Xpt3C2Ji1/Mfij3PXP/6rY37M/NkTg+V2+fj6hYV6/Mr0koNjVnSYFne81/vIiIXz/1tuV45vOHlR65V6yeZBP3UbQfLm1JnwlN/wSiduJ2XKcXz7dgyBMmMzPjEz9iriN5zltcUmuTz5JI6I2tqbHOpGrvn1Na9nHvilz0f5Xxb/ki+NG3f29NJkLI83Y9kdzKVNBrVslf8lP21i2yVLfiJJ3iRR1Ct+4XnOXMp8SahnM59v5FQMa9YEwalTSXJ95Eg679kzYgvY9WntB9QdLeksVQdJqUyepXHWkegZY9R1PodW2l/tdwi2Npy9quGo37xzB4Af3xmWYfxJSXGGSXgU0IIfS4Dsc3QRGPyp7dsNCPANTXwGBQwDfid3E3/DKpujoyC8lEAAJa09aJ5uGIeQB1dgEKR4xoKR83I80BTbJ/OBrC8KRCPfoDRwG7RGfjAO4RdcLfxDSqP2wYi6vzDQI3/2wAiCkxq3ymvKxjLJWVD6inYZgZMin/aJXH1I9U2XTb1gRh5iS13ZQcQow5TUM/U0jJFUYZpRS+NEyqJtTdkbNZrSzpmJGAICTZTRluJpJDPuaHGW+/5XyFqKANc01dg/IVb5yZVeo0NgXuQZ1XQp06sVayCEYZcZjCTKM21FkcSJUsrnzZAmGq5DtFhomWEGK2+mV6Z7PQYY8Cx+SrQ44kpK0uKJL4Zm15qWWUaIkDWuvftGlHMQAe0SZdxeagfZovNViLfHFhIWmM6iz7hGb51cR9IQLdQqIOd601HVjiieCWOefLbLsrMDAAA=') format('woff2'), | ||
| 5 | + url('iconfont.woff?t=1584011049763') format('woff'), | ||
| 6 | + url('iconfont.ttf?t=1584011049763') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ | ||
| 7 | + url('iconfont.svg?t=1584011049763#iconfont') format('svg'); /* iOS 4.1- */ | ||
| 8 | +} | ||
| 9 | + | ||
| 10 | +.iconfont { | ||
| 11 | + font-family: "iconfont" !important; | ||
| 12 | + font-size: 16px; | ||
| 13 | + font-style: normal; | ||
| 14 | + -webkit-font-smoothing: antialiased; | ||
| 15 | + -moz-osx-font-smoothing: grayscale; | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | +.icon-accountbalancewallet:before { | ||
| 19 | + content: "\ea37"; | ||
| 20 | +} | ||
| 21 | + | ||
| 22 | +.icon-attachmoney:before { | ||
| 23 | + content: "\ea7d"; | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +.icon-changehistory:before { | ||
| 27 | + content: "\eacf"; | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +.icon-gamepad:before { | ||
| 31 | + content: "\eb8c"; | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +.icon-lineweight:before { | ||
| 35 | + content: "\ebfd"; | ||
| 36 | +} | ||
| 37 | + | ||
| 38 | +.icon-localgasstation:before { | ||
| 39 | + content: "\ec0b"; | ||
| 40 | +} | ||
| 41 | + | ||
| 42 | +.icon-school:before { | ||
| 43 | + content: "\eced"; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +.icon-trendingup:before { | ||
| 47 | + content: "\ed74"; | ||
| 48 | +} | ||
| 49 | + |
No preview for this file type
| @@ -0,0 +1 @@ | @@ -0,0 +1 @@ | ||
| 1 | +!function(d){var t,a='<svg><symbol id="icon-accountbalancewallet" viewBox="0 0 1024 1024"><path d="M681.984 576q25.984 0 45.013333-18.005333t18.986667-45.994667-18.986667-45.994667-45.013333-18.005333-45.013333 18.005333-18.986667 45.994667 18.986667 45.994667 45.013333 18.005333zM512 681.984l0-340.010667 425.984 0 0 340.010667-425.984 0zM896 768l0 41.984q0 34.005333-25.984 59.989333t-59.989333 25.984l-596.010667 0q-36.010667 0-61.013333-25.984t-25.002667-59.989333l0-596.010667q0-34.005333 25.002667-59.989333t61.013333-25.984l596.010667 0q34.005333 0 59.989333 25.984t25.984 59.989333l0 41.984-384 0q-36.010667 0-61.013333 25.984t-25.002667 59.989333l0 340.010667q0 34.005333 25.002667 59.989333t61.013333 25.984l384 0z" ></path></symbol><symbol id="icon-attachmoney" viewBox="0 0 1024 1024"><path d="M504.021333 466.005333q43.989333 11.989333 73.002667 24.021333t61.013333 32.981333 48.981333 52.992 16.981333 75.989333q0 61.994667-41.002667 100.992t-109.013333 50.986667l0 91.989333-128 0 0-91.989333q-66.005333-13.994667-109.013333-56.021333t-47.018667-107.989333l93.994667 0q8.021333 89.984 125.994667 89.984 61.994667 0 89.002667-22.997333t27.008-52.992q0-72.021333-128-104.021333-200.021333-45.994667-200.021333-176 0-57.984 41.984-98.986667t105.984-54.997333l0-91.989333 128 0 0 93.994667q66.005333 16 100.992 59.989333t36.992 102.016l-93.994667 0q-4.010667-89.984-107.989333-89.984-52.010667 0-82.986667 22.016t-31.018667 57.984q0 57.984 128 91.989333z" ></path></symbol><symbol id="icon-changehistory" viewBox="0 0 1024 1024"><path d="M512 169.984l425.984 683.989333-852.010667 0zM512 331.989333l-272 436.010667 544 0z" ></path></symbol><symbol id="icon-gamepad" viewBox="0 0 1024 1024"><path d="M704 384l233.984 0 0 256-233.984 0-128-128zM384 704l128-128 128 128 0 233.984-256 0 0-233.984zM320 384l128 128-128 128-233.984 0 0-256 233.984 0zM640 320l-128 128-128-128 0-233.984 256 0 0 233.984z" ></path></symbol><symbol id="icon-lineweight" viewBox="0 0 1024 1024"><path d="M128 169.984l768 0 0 171.989333-768 0 0-171.989333zM128 553.984l0-128 768 0 0 128-768 0zM128 854.016l0-43.989333 768 0 0 43.989333-768 0zM128 726.016l0-86.016 768 0 0 86.016-768 0z" ></path></symbol><symbol id="icon-localgasstation" viewBox="0 0 1024 1024"><path d="M768 425.984q18.005333 0 29.994667-11.989333t11.989333-29.994667-11.989333-29.994667-29.994667-11.989333-29.994667 11.989333-11.989333 29.994667 11.989333 29.994667 29.994667 11.989333zM512 425.984l0-212.010667-256 0 0 212.010667 256 0zM843.989333 308.010667q29.994667 29.994667 29.994667 75.989333l0 406.016q0 43.989333-31.018667 75.008t-75.008 31.018667-75.008-31.018667-31.018667-75.008l0-214.016-64 0 0 320-427.989333 0 0-681.984q0-34.005333 25.984-59.989333t59.989333-25.984l256 0q34.005333 0 59.989333 25.984t25.984 59.989333l0 297.984 41.984 0q34.005333 0 59.989333 25.984t25.984 59.989333l0 192q0 18.005333 11.989333 29.994667t29.994667 11.989333 29.994667-11.989333 11.989333-29.994667l0-308.010667q-18.005333 8.021333-41.984 8.021333-43.989333 0-75.008-31.018667t-31.018667-75.008q0-72.021333 68.010667-100.010667l-89.984-89.984 45.994667-43.989333z" ></path></symbol><symbol id="icon-school" viewBox="0 0 1024 1024"><path d="M512 128l470.016 256 0 342.016-86.016 0 0-296.021333-384 210.005333-470.016-256zM214.016 562.005333l297.984 164.010667 297.984-164.010667 0 171.989333-297.984 162.005333-297.984-162.005333 0-171.989333z" ></path></symbol><symbol id="icon-trendingup" viewBox="0 0 1024 1024"><path d="M681.984 256l256 0 0 256-98.005333-98.005333-267.989333 267.989333-169.984-169.984-256 256-59.989333-59.989333 315.989333-315.989333 169.984 169.984 208-208z" ></path></symbol></svg>',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!d.__iconfont__svg__cssinject__){d.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(o=t,n=d.document,i=!1,(a=function(){try{n.documentElement.doScroll("left")}catch(t){return void setTimeout(a,50)}l()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,l())});function l(){i||(i=!0,o())}var o,n,i,a}(function(){var t,e,l,o,n,i;(t=document.createElement("div")).innerHTML=a,a=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",l=e,(o=document.body).firstChild?(n=l,(i=o.firstChild).parentNode.insertBefore(n,i)):o.appendChild(l))})}(window); | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
| @@ -0,0 +1,65 @@ | @@ -0,0 +1,65 @@ | ||
| 1 | +{ | ||
| 2 | + "id": "1687934", | ||
| 3 | + "name": "ZeyiDriver", | ||
| 4 | + "font_family": "iconfont", | ||
| 5 | + "css_prefix_text": "icon-", | ||
| 6 | + "description": "", | ||
| 7 | + "glyphs": [ | ||
| 8 | + { | ||
| 9 | + "icon_id": "489801", | ||
| 10 | + "name": "account_balance_wallet", | ||
| 11 | + "font_class": "accountbalancewallet", | ||
| 12 | + "unicode": "ea37", | ||
| 13 | + "unicode_decimal": 59959 | ||
| 14 | + }, | ||
| 15 | + { | ||
| 16 | + "icon_id": "489878", | ||
| 17 | + "name": "attach_money", | ||
| 18 | + "font_class": "attachmoney", | ||
| 19 | + "unicode": "ea7d", | ||
| 20 | + "unicode_decimal": 60029 | ||
| 21 | + }, | ||
| 22 | + { | ||
| 23 | + "icon_id": "489967", | ||
| 24 | + "name": "change_history", | ||
| 25 | + "font_class": "changehistory", | ||
| 26 | + "unicode": "eacf", | ||
| 27 | + "unicode_decimal": 60111 | ||
| 28 | + }, | ||
| 29 | + { | ||
| 30 | + "icon_id": "490168", | ||
| 31 | + "name": "gamepad", | ||
| 32 | + "font_class": "gamepad", | ||
| 33 | + "unicode": "eb8c", | ||
| 34 | + "unicode_decimal": 60300 | ||
| 35 | + }, | ||
| 36 | + { | ||
| 37 | + "icon_id": "490286", | ||
| 38 | + "name": "line_weight", | ||
| 39 | + "font_class": "lineweight", | ||
| 40 | + "unicode": "ebfd", | ||
| 41 | + "unicode_decimal": 60413 | ||
| 42 | + }, | ||
| 43 | + { | ||
| 44 | + "icon_id": "490300", | ||
| 45 | + "name": "local_gas_station", | ||
| 46 | + "font_class": "localgasstation", | ||
| 47 | + "unicode": "ec0b", | ||
| 48 | + "unicode_decimal": 60427 | ||
| 49 | + }, | ||
| 50 | + { | ||
| 51 | + "icon_id": "490590", | ||
| 52 | + "name": "school", | ||
| 53 | + "font_class": "school", | ||
| 54 | + "unicode": "eced", | ||
| 55 | + "unicode_decimal": 60653 | ||
| 56 | + }, | ||
| 57 | + { | ||
| 58 | + "icon_id": "490748", | ||
| 59 | + "name": "trending_up", | ||
| 60 | + "font_class": "trendingup", | ||
| 61 | + "unicode": "ed74", | ||
| 62 | + "unicode_decimal": 60788 | ||
| 63 | + } | ||
| 64 | + ] | ||
| 65 | +} |
| @@ -0,0 +1,50 @@ | @@ -0,0 +1,50 @@ | ||
| 1 | +<?xml version="1.0" standalone="no"?> | ||
| 2 | +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > | ||
| 3 | +<!-- | ||
| 4 | +2013-9-30: Created. | ||
| 5 | +--> | ||
| 6 | +<svg> | ||
| 7 | +<metadata> | ||
| 8 | +Created by iconfont | ||
| 9 | +</metadata> | ||
| 10 | +<defs> | ||
| 11 | + | ||
| 12 | +<font id="iconfont" horiz-adv-x="1024" > | ||
| 13 | + <font-face | ||
| 14 | + font-family="iconfont" | ||
| 15 | + font-weight="500" | ||
| 16 | + font-stretch="normal" | ||
| 17 | + units-per-em="1024" | ||
| 18 | + ascent="896" | ||
| 19 | + descent="-128" | ||
| 20 | + /> | ||
| 21 | + <missing-glyph /> | ||
| 22 | + | ||
| 23 | + <glyph glyph-name="accountbalancewallet" unicode="" d="M681.984 320q25.984 0 45.013333 18.005333t18.986667 45.994667-18.986667 45.994667-45.013333 18.005333-45.013333-18.005333-18.986667-45.994667 18.986667-45.994667 45.013333-18.005333zM512 214.016l0 340.010667 425.984 0 0-340.010667-425.984 0zM896 128l0-41.984q0-34.005333-25.984-59.989333t-59.989333-25.984l-596.010667 0q-36.010667 0-61.013333 25.984t-25.002667 59.989333l0 596.010667q0 34.005333 25.002667 59.989333t61.013333 25.984l596.010667 0q34.005333 0 59.989333-25.984t25.984-59.989333l0-41.984-384 0q-36.010667 0-61.013333-25.984t-25.002667-59.989333l0-340.010667q0-34.005333 25.002667-59.989333t61.013333-25.984l384 0z" horiz-adv-x="1024" /> | ||
| 24 | + | ||
| 25 | + | ||
| 26 | + <glyph glyph-name="attachmoney" unicode="" d="M504.021333 429.994667q43.989333-11.989333 73.002667-24.021333t61.013333-32.981333 48.981333-52.992 16.981333-75.989333q0-61.994667-41.002667-100.992t-109.013333-50.986667l0-91.989333-128 0 0 91.989333q-66.005333 13.994667-109.013333 56.021333t-47.018667 107.989333l93.994667 0q8.021333-89.984 125.994667-89.984 61.994667 0 89.002667 22.997333t27.008 52.992q0 72.021333-128 104.021333-200.021333 45.994667-200.021333 176 0 57.984 41.984 98.986667t105.984 54.997333l0 91.989333 128 0 0-93.994667q66.005333-16 100.992-59.989333t36.992-102.016l-93.994667 0q-4.010667 89.984-107.989333 89.984-52.010667 0-82.986667-22.016t-31.018667-57.984q0-57.984 128-91.989333z" horiz-adv-x="1024" /> | ||
| 27 | + | ||
| 28 | + | ||
| 29 | + <glyph glyph-name="changehistory" unicode="" d="M512 726.016l425.984-683.989333-852.010667 0zM512 564.010667l-272-436.010667 544 0z" horiz-adv-x="1024" /> | ||
| 30 | + | ||
| 31 | + | ||
| 32 | + <glyph glyph-name="gamepad" unicode="" d="M704 512l233.984 0 0-256-233.984 0-128 128zM384 192l128 128 128-128 0-233.984-256 0 0 233.984zM320 512l128-128-128-128-233.984 0 0 256 233.984 0zM640 576l-128-128-128 128 0 233.984 256 0 0-233.984z" horiz-adv-x="1024" /> | ||
| 33 | + | ||
| 34 | + | ||
| 35 | + <glyph glyph-name="lineweight" unicode="" d="M128 726.016l768 0 0-171.989333-768 0 0 171.989333zM128 342.016l0 128 768 0 0-128-768 0zM128 41.984l0 43.989333 768 0 0-43.989333-768 0zM128 169.984l0 86.016 768 0 0-86.016-768 0z" horiz-adv-x="1024" /> | ||
| 36 | + | ||
| 37 | + | ||
| 38 | + <glyph glyph-name="localgasstation" unicode="" d="M768 470.016q18.005333 0 29.994667 11.989333t11.989333 29.994667-11.989333 29.994667-29.994667 11.989333-29.994667-11.989333-11.989333-29.994667 11.989333-29.994667 29.994667-11.989333zM512 470.016l0 212.010667-256 0 0-212.010667 256 0zM843.989333 587.989333q29.994667-29.994667 29.994667-75.989333l0-406.016q0-43.989333-31.018667-75.008t-75.008-31.018667-75.008 31.018667-31.018667 75.008l0 214.016-64 0 0-320-427.989333 0 0 681.984q0 34.005333 25.984 59.989333t59.989333 25.984l256 0q34.005333 0 59.989333-25.984t25.984-59.989333l0-297.984 41.984 0q34.005333 0 59.989333-25.984t25.984-59.989333l0-192q0-18.005333 11.989333-29.994667t29.994667-11.989333 29.994667 11.989333 11.989333 29.994667l0 308.010667q-18.005333-8.021333-41.984-8.021333-43.989333 0-75.008 31.018667t-31.018667 75.008q0 72.021333 68.010667 100.010667l-89.984 89.984 45.994667 43.989333z" horiz-adv-x="1024" /> | ||
| 39 | + | ||
| 40 | + | ||
| 41 | + <glyph glyph-name="school" unicode="" d="M512 768l470.016-256 0-342.016-86.016 0 0 296.021333-384-210.005333-470.016 256zM214.016 333.994667l297.984-164.010667 297.984 164.010667 0-171.989333-297.984-162.005333-297.984 162.005333 0 171.989333z" horiz-adv-x="1024" /> | ||
| 42 | + | ||
| 43 | + | ||
| 44 | + <glyph glyph-name="trendingup" unicode="" d="M681.984 640l256 0 0-256-98.005333 98.005333-267.989333-267.989333-169.984 169.984-256-256-59.989333 59.989333 315.989333 315.989333 169.984-169.984 208 208z" horiz-adv-x="1024" /> | ||
| 45 | + | ||
| 46 | + | ||
| 47 | + | ||
| 48 | + | ||
| 49 | + </font> | ||
| 50 | +</defs></svg> |
No preview for this file type
No preview for this file type
No preview for this file type
examples/main.js
| @@ -8,6 +8,7 @@ import NProgress from 'nprogress'; | @@ -8,6 +8,7 @@ import NProgress from 'nprogress'; | ||
| 8 | import CodeSnippet from "@/components/code-snippet"; | 8 | import CodeSnippet from "@/components/code-snippet"; |
| 9 | import '@/styles/index.scss'; | 9 | import '@/styles/index.scss'; |
| 10 | import "@/styles/highlight.scss"; | 10 | import "@/styles/highlight.scss"; |
| 11 | +import "@/assets/iconfont/iconfont.css"; | ||
| 11 | 12 | ||
| 12 | // 进度条配置 | 13 | // 进度条配置 |
| 13 | NProgress.configure({ showSpinner: false }); | 14 | NProgress.configure({ showSpinner: false }); |
examples/router/routes.js
| @@ -36,6 +36,12 @@ const _components = [ | @@ -36,6 +36,12 @@ const _components = [ | ||
| 36 | meta: { title: 'Cell 单元格' }, | 36 | meta: { title: 'Cell 单元格' }, |
| 37 | component: () => import('@/views/docs/component/cell.md'), | 37 | component: () => import('@/views/docs/component/cell.md'), |
| 38 | }, | 38 | }, |
| 39 | + { | ||
| 40 | + path: 'icon', | ||
| 41 | + name: 'icon', | ||
| 42 | + meta: { title: 'Icon 图标' }, | ||
| 43 | + component: () => import('@/views/docs/component/icon.md'), | ||
| 44 | + }, | ||
| 39 | ] | 45 | ] |
| 40 | }, | 46 | }, |
| 41 | { | 47 | { |
| @@ -0,0 +1,30 @@ | @@ -0,0 +1,30 @@ | ||
| 1 | +# Icon 图标 | ||
| 2 | + | ||
| 3 | +基础图标 | ||
| 4 | + | ||
| 5 | +## 基础用法 | ||
| 6 | + | ||
| 7 | +图标说明 | ||
| 8 | + | ||
| 9 | +::: snippet 示例 | ||
| 10 | + | ||
| 11 | +```html | ||
| 12 | +<template> | ||
| 13 | + <div> | ||
| 14 | + <zui-icon name="attachmoney" /> | ||
| 15 | + <zui-icon name="accountbalancewallet" size="2rem" info="1" /> | ||
| 16 | + <zui-icon name="trendingup" size="2rem" color="red" /> | ||
| 17 | + </div> | ||
| 18 | +</template> | ||
| 19 | + | ||
| 20 | +<script> | ||
| 21 | +export default { | ||
| 22 | + data() { | ||
| 23 | + return { | ||
| 24 | + } | ||
| 25 | + }, | ||
| 26 | +} | ||
| 27 | +</script> | ||
| 28 | +``` | ||
| 29 | + | ||
| 30 | +::: | ||
| 0 | \ No newline at end of file | 31 | \ No newline at end of file |
| @@ -0,0 +1,34 @@ | @@ -0,0 +1,34 @@ | ||
| 1 | +.zui-icon { | ||
| 2 | + position: relative; | ||
| 3 | + display: inline-block; | ||
| 4 | + font: normal normal normal 14px/1 "iconfont"; | ||
| 5 | + font-size: inherit; | ||
| 6 | + text-rendering: auto; | ||
| 7 | + -webkit-font-smoothing: antialiased; | ||
| 8 | +} | ||
| 9 | + | ||
| 10 | +.zui-icon::before { | ||
| 11 | + display: inline-block; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +.zui-info { | ||
| 15 | + position: absolute; | ||
| 16 | + top: 0; | ||
| 17 | + right: 0; | ||
| 18 | + box-sizing: border-box; | ||
| 19 | + min-width: 16px; | ||
| 20 | + padding: 0 3px; | ||
| 21 | + color: #fff; | ||
| 22 | + font-weight: 500; | ||
| 23 | + font-size: 12px; | ||
| 24 | + font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; | ||
| 25 | + line-height: 14px; | ||
| 26 | + text-align: center; | ||
| 27 | + background-color: #ee0a24; | ||
| 28 | + border: 1px solid #fff; | ||
| 29 | + border-radius: 16px; | ||
| 30 | + -webkit-transform: translate(50%, -50%); | ||
| 31 | + transform: translate(50%, -50%); | ||
| 32 | + -webkit-transform-origin: 100%; | ||
| 33 | + transform-origin: 100%; | ||
| 34 | +} | ||
| 0 | \ No newline at end of file | 35 | \ No newline at end of file |
| @@ -0,0 +1,51 @@ | @@ -0,0 +1,51 @@ | ||
| 1 | +<template> | ||
| 2 | + <i class="zui-icon" :class="classRender" :style="styleRender"> | ||
| 3 | + <div v-if="info" class="zui-info">{{ info }}</div> | ||
| 4 | + </i> | ||
| 5 | +</template> | ||
| 6 | + | ||
| 7 | +<script> | ||
| 8 | +export default { | ||
| 9 | + name: 'Icon', | ||
| 10 | + props: { | ||
| 11 | + name: { | ||
| 12 | + type: String, | ||
| 13 | + default: '', | ||
| 14 | + }, | ||
| 15 | + fontFamily: { | ||
| 16 | + type: String, | ||
| 17 | + default: 'iconfont', | ||
| 18 | + }, | ||
| 19 | + classPrefix: { | ||
| 20 | + type: String, | ||
| 21 | + default: 'icon-' | ||
| 22 | + }, | ||
| 23 | + size: { | ||
| 24 | + type: String, | ||
| 25 | + default: 'inherit' | ||
| 26 | + }, | ||
| 27 | + color: { | ||
| 28 | + type: String, | ||
| 29 | + default: 'inherit' | ||
| 30 | + }, | ||
| 31 | + info: [Number, String] | ||
| 32 | + }, | ||
| 33 | + computed: { | ||
| 34 | + classRender: function() { | ||
| 35 | + var fontFamily = this.fontFamily || ''; | ||
| 36 | + var iconClass = this.classPrefix + this.name; | ||
| 37 | + return [fontFamily, iconClass] | ||
| 38 | + }, | ||
| 39 | + styleRender: function() { | ||
| 40 | + return { | ||
| 41 | + fontSize: this.size, | ||
| 42 | + color: this.color | ||
| 43 | + } | ||
| 44 | + }, | ||
| 45 | + } | ||
| 46 | +} | ||
| 47 | +</script> | ||
| 48 | + | ||
| 49 | +<style> | ||
| 50 | +@import "./index.css"; | ||
| 51 | +</style> | ||
| 0 | \ No newline at end of file | 52 | \ No newline at end of file |