Task: #118836 iconfont彩色字体现有方案（部分图标设计组正在修改，后续添加进入）
This commit is contained in:
yajun
parent
c27f606aab
commit
fef6e6684c
|
|
@ -0,0 +1,63 @@
|
|||
# iconfont字体库
|
||||
## 介绍
|
||||
iconfont字体库支持多色图标字体，可通过Unicode、fontclass和symbol三种方式进行引用。
|
||||
## 使用方法
|
||||
> Unicode 引用
|
||||
```
|
||||
第一步：设置@font-face
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src:
|
||||
url('iconfont.ttf?t=1667368773903') format('truetype');
|
||||
}
|
||||
|
||||
第二步：定义样式，如
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
第三步：挑选相应图标并获取字体编码，应用于页面（字体编码可在iconfont.json文件中查询）
|
||||
|
||||
<span class="iconfont">3</span>
|
||||
```
|
||||
> font-class 引用
|
||||
```
|
||||
第一步：引用生成的iconfont.css文件
|
||||
<link rel="stylesheet" href="./iconfont.css">
|
||||
|
||||
第二步：挑选相应图标并获取类名，应用于页面：
|
||||
|
||||
<span class="iconfont xxx"></span>
|
||||
```
|
||||
|
||||
> Symbol 引用
|
||||
```
|
||||
第一步：引入iconfont.js：
|
||||
|
||||
<script src="./iconfont.js"></script>
|
||||
|
||||
第二步：加入通用 CSS 代码（引入一次就行）：
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
第三步：挑选相应图标并获取类名，应用于页面：
|
||||
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
|
||||
import {customElement} from 'lit/decorators.js'
|
||||
import {sharedPickerStyles} from '../shared-picker-styles'
|
||||
|
||||
@customElement('panel-iconfont')
|
||||
export class PanelIconFont extends LitElement {
|
||||
public icondata = {
|
||||
id: '3736756',
|
||||
name: '32px',
|
||||
font_family: 'iconfont',
|
||||
css_prefix_text: '',
|
||||
description: '',
|
||||
glyphs: [
|
||||
{
|
||||
icon_id: '32595741',
|
||||
name: 'add',
|
||||
font_class: 'add',
|
||||
unicode: 'e611',
|
||||
unicode_decimal: 58897,
|
||||
},
|
||||
{
|
||||
icon_id: '32595742',
|
||||
name: 'airplane',
|
||||
font_class: 'airplane',
|
||||
unicode: 'e612',
|
||||
unicode_decimal: 58898,
|
||||
},
|
||||
{
|
||||
icon_id: '32595743',
|
||||
name: 'alarm-clock',
|
||||
font_class: 'alarm-clock',
|
||||
unicode: 'e613',
|
||||
unicode_decimal: 58899,
|
||||
},
|
||||
{
|
||||
icon_id: '32595744',
|
||||
name: 'alarm',
|
||||
font_class: 'alarm',
|
||||
unicode: 'e614',
|
||||
unicode_decimal: 58900,
|
||||
},
|
||||
{
|
||||
icon_id: '32595745',
|
||||
name: 'alarm-stop',
|
||||
font_class: 'alarm-stop',
|
||||
unicode: 'e615',
|
||||
unicode_decimal: 58901,
|
||||
},
|
||||
{
|
||||
icon_id: '32595746',
|
||||
name: 'bluetooth',
|
||||
font_class: 'bluetooth',
|
||||
unicode: 'e616',
|
||||
unicode_decimal: 58902,
|
||||
},
|
||||
{
|
||||
icon_id: '32595747',
|
||||
name: 'right',
|
||||
font_class: 'right',
|
||||
unicode: 'e617',
|
||||
unicode_decimal: 58903,
|
||||
},
|
||||
{
|
||||
icon_id: '32595748',
|
||||
name: 'more',
|
||||
font_class: 'more',
|
||||
unicode: 'e618',
|
||||
unicode_decimal: 58904,
|
||||
},
|
||||
{
|
||||
icon_id: '32595749',
|
||||
name: 'message',
|
||||
font_class: 'message',
|
||||
unicode: 'e619',
|
||||
unicode_decimal: 58905,
|
||||
},
|
||||
{
|
||||
icon_id: '32595750',
|
||||
name: 'search',
|
||||
font_class: 'search',
|
||||
unicode: 'e61a',
|
||||
unicode_decimal: 58906,
|
||||
},
|
||||
{
|
||||
icon_id: '32595751',
|
||||
name: 'close',
|
||||
font_class: 'close',
|
||||
unicode: 'e61b',
|
||||
unicode_decimal: 58907,
|
||||
},
|
||||
{
|
||||
icon_id: '32595752',
|
||||
name: 'call',
|
||||
font_class: 'call',
|
||||
unicode: 'e61c',
|
||||
unicode_decimal: 58908,
|
||||
},
|
||||
{
|
||||
icon_id: '32595753',
|
||||
name: 'delete',
|
||||
font_class: 'delete',
|
||||
unicode: 'e61d',
|
||||
unicode_decimal: 58909,
|
||||
},
|
||||
{
|
||||
icon_id: '32595754',
|
||||
name: 'lock',
|
||||
font_class: 'lock',
|
||||
unicode: 'e61e',
|
||||
unicode_decimal: 58910,
|
||||
},
|
||||
{
|
||||
icon_id: '32595755',
|
||||
name: 'signal-0',
|
||||
font_class: 'signal-0',
|
||||
unicode: 'e61f',
|
||||
unicode_decimal: 58911,
|
||||
},
|
||||
{
|
||||
icon_id: '32595756',
|
||||
name: 'settings',
|
||||
font_class: 'settings',
|
||||
unicode: 'e620',
|
||||
unicode_decimal: 58912,
|
||||
},
|
||||
{
|
||||
icon_id: '32595757',
|
||||
name: 'signal-roaming',
|
||||
font_class: 'signal-roaming',
|
||||
unicode: 'e621',
|
||||
unicode_decimal: 58913,
|
||||
},
|
||||
{
|
||||
icon_id: '32595758',
|
||||
name: 'signal-1',
|
||||
font_class: 'signal-1',
|
||||
unicode: 'e622',
|
||||
unicode_decimal: 58914,
|
||||
},
|
||||
{
|
||||
icon_id: '32595759',
|
||||
name: 'signal-3',
|
||||
font_class: 'signal-3',
|
||||
unicode: 'e623',
|
||||
unicode_decimal: 58915,
|
||||
},
|
||||
{
|
||||
icon_id: '32595760',
|
||||
name: 'tick',
|
||||
font_class: 'tick',
|
||||
unicode: 'e624',
|
||||
unicode_decimal: 58916,
|
||||
},
|
||||
{
|
||||
icon_id: '32595761',
|
||||
name: 'signal-4',
|
||||
font_class: 'signal-4',
|
||||
unicode: 'e625',
|
||||
unicode_decimal: 58917,
|
||||
},
|
||||
{
|
||||
icon_id: '32595762',
|
||||
name: 'signal-2',
|
||||
font_class: 'signal-2',
|
||||
unicode: 'e626',
|
||||
unicode_decimal: 58918,
|
||||
},
|
||||
{
|
||||
icon_id: '32595763',
|
||||
name: 'skip-forward',
|
||||
font_class: 'skip-forward',
|
||||
unicode: 'e627',
|
||||
unicode_decimal: 58919,
|
||||
},
|
||||
{
|
||||
icon_id: '32595764',
|
||||
name: 'wifi-1',
|
||||
font_class: 'wifi-1',
|
||||
unicode: 'e628',
|
||||
unicode_decimal: 58920,
|
||||
},
|
||||
{
|
||||
icon_id: '32595765',
|
||||
name: 'wifi-3',
|
||||
font_class: 'wifi-3',
|
||||
unicode: 'e629',
|
||||
unicode_decimal: 58921,
|
||||
},
|
||||
{
|
||||
icon_id: '32595766',
|
||||
name: 'location',
|
||||
font_class: 'location',
|
||||
unicode: 'e62a',
|
||||
unicode_decimal: 58922,
|
||||
},
|
||||
{
|
||||
icon_id: '32595767',
|
||||
name: 'wifi-4',
|
||||
font_class: 'wifi-4',
|
||||
unicode: 'e62b',
|
||||
unicode_decimal: 58923,
|
||||
},
|
||||
{
|
||||
icon_id: '32595768',
|
||||
name: 'wifi-2',
|
||||
font_class: 'wifi-2',
|
||||
unicode: 'e62c',
|
||||
unicode_decimal: 58924,
|
||||
},
|
||||
{
|
||||
icon_id: '32595769',
|
||||
name: 'wifi-permissions',
|
||||
font_class: 'wifi-permissions',
|
||||
unicode: 'e62d',
|
||||
unicode_decimal: 58925,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
initIconCode() {
|
||||
let html = ''
|
||||
for (let i = 0; i < this.icondata.glyphs.length; i++) {
|
||||
html +=
|
||||
'<span class="iconfont">&#x' +
|
||||
this.icondata.glyphs[i].unicode +
|
||||
';</span>'
|
||||
}
|
||||
let node = document.createElement('div')
|
||||
node.className = 'p-scroll'
|
||||
node.innerHTML = html
|
||||
this.shadowRoot!.querySelector('.abc')!.appendChild(node)
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.initIconCode()
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="abc"></div>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [sharedPickerStyles]
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-iconfont': PanelIconFont
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3736756 */
|
||||
/* Color fonts */
|
||||
src:
|
||||
url('iconfont.ttf?t=1667368773903') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.add:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.airplane:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.alarm-clock:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.alarm:before {
|
||||
content: "\e614";
|
||||
}
|
||||
|
||||
.alarm-stop:before {
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.bluetooth:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.right:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.more:before {
|
||||
content: "\e618";
|
||||
}
|
||||
|
||||
.message:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.search:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.close:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.call:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.delete:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.lock:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.signal-0:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.settings:before {
|
||||
content: "\e620";
|
||||
}
|
||||
|
||||
.signal-roaming:before {
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.signal-1:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.signal-3:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.tick:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.signal-4:before {
|
||||
content: "\e625";
|
||||
}
|
||||
|
||||
.signal-2:before {
|
||||
content: "\e626";
|
||||
}
|
||||
|
||||
.skip-forward:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.wifi-1:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.wifi-3:before {
|
||||
content: "\e629";
|
||||
}
|
||||
|
||||
.location:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.wifi-4:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.wifi-2:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.wifi-permissions:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,212 @@
|
|||
{
|
||||
"id": "3736756",
|
||||
"name": "32px",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "32595741",
|
||||
"name": "add",
|
||||
"font_class": "add",
|
||||
"unicode": "e611",
|
||||
"unicode_decimal": 58897
|
||||
},
|
||||
{
|
||||
"icon_id": "32595742",
|
||||
"name": "airplane",
|
||||
"font_class": "airplane",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "32595743",
|
||||
"name": "alarm-clock",
|
||||
"font_class": "alarm-clock",
|
||||
"unicode": "e613",
|
||||
"unicode_decimal": 58899
|
||||
},
|
||||
{
|
||||
"icon_id": "32595744",
|
||||
"name": "alarm",
|
||||
"font_class": "alarm",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "32595745",
|
||||
"name": "alarm-stop",
|
||||
"font_class": "alarm-stop",
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "32595746",
|
||||
"name": "bluetooth",
|
||||
"font_class": "bluetooth",
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "32595747",
|
||||
"name": "right",
|
||||
"font_class": "right",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "32595748",
|
||||
"name": "more",
|
||||
"font_class": "more",
|
||||
"unicode": "e618",
|
||||
"unicode_decimal": 58904
|
||||
},
|
||||
{
|
||||
"icon_id": "32595749",
|
||||
"name": "message",
|
||||
"font_class": "message",
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "32595750",
|
||||
"name": "search",
|
||||
"font_class": "search",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "32595751",
|
||||
"name": "close",
|
||||
"font_class": "close",
|
||||
"unicode": "e61b",
|
||||
"unicode_decimal": 58907
|
||||
},
|
||||
{
|
||||
"icon_id": "32595752",
|
||||
"name": "call",
|
||||
"font_class": "call",
|
||||
"unicode": "e61c",
|
||||
"unicode_decimal": 58908
|
||||
},
|
||||
{
|
||||
"icon_id": "32595753",
|
||||
"name": "delete",
|
||||
"font_class": "delete",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "32595754",
|
||||
"name": "lock",
|
||||
"font_class": "lock",
|
||||
"unicode": "e61e",
|
||||
"unicode_decimal": 58910
|
||||
},
|
||||
{
|
||||
"icon_id": "32595755",
|
||||
"name": "signal-0",
|
||||
"font_class": "signal-0",
|
||||
"unicode": "e61f",
|
||||
"unicode_decimal": 58911
|
||||
},
|
||||
{
|
||||
"icon_id": "32595756",
|
||||
"name": "settings",
|
||||
"font_class": "settings",
|
||||
"unicode": "e620",
|
||||
"unicode_decimal": 58912
|
||||
},
|
||||
{
|
||||
"icon_id": "32595757",
|
||||
"name": "signal-roaming",
|
||||
"font_class": "signal-roaming",
|
||||
"unicode": "e621",
|
||||
"unicode_decimal": 58913
|
||||
},
|
||||
{
|
||||
"icon_id": "32595758",
|
||||
"name": "signal-1",
|
||||
"font_class": "signal-1",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "32595759",
|
||||
"name": "signal-3",
|
||||
"font_class": "signal-3",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "32595760",
|
||||
"name": "tick",
|
||||
"font_class": "tick",
|
||||
"unicode": "e624",
|
||||
"unicode_decimal": 58916
|
||||
},
|
||||
{
|
||||
"icon_id": "32595761",
|
||||
"name": "signal-4",
|
||||
"font_class": "signal-4",
|
||||
"unicode": "e625",
|
||||
"unicode_decimal": 58917
|
||||
},
|
||||
{
|
||||
"icon_id": "32595762",
|
||||
"name": "signal-2",
|
||||
"font_class": "signal-2",
|
||||
"unicode": "e626",
|
||||
"unicode_decimal": 58918
|
||||
},
|
||||
{
|
||||
"icon_id": "32595763",
|
||||
"name": "skip-forward",
|
||||
"font_class": "skip-forward",
|
||||
"unicode": "e627",
|
||||
"unicode_decimal": 58919
|
||||
},
|
||||
{
|
||||
"icon_id": "32595764",
|
||||
"name": "wifi-1",
|
||||
"font_class": "wifi-1",
|
||||
"unicode": "e628",
|
||||
"unicode_decimal": 58920
|
||||
},
|
||||
{
|
||||
"icon_id": "32595765",
|
||||
"name": "wifi-3",
|
||||
"font_class": "wifi-3",
|
||||
"unicode": "e629",
|
||||
"unicode_decimal": 58921
|
||||
},
|
||||
{
|
||||
"icon_id": "32595766",
|
||||
"name": "location",
|
||||
"font_class": "location",
|
||||
"unicode": "e62a",
|
||||
"unicode_decimal": 58922
|
||||
},
|
||||
{
|
||||
"icon_id": "32595767",
|
||||
"name": "wifi-4",
|
||||
"font_class": "wifi-4",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "32595768",
|
||||
"name": "wifi-2",
|
||||
"font_class": "wifi-2",
|
||||
"unicode": "e62c",
|
||||
"unicode_decimal": 58924
|
||||
},
|
||||
{
|
||||
"icon_id": "32595769",
|
||||
"name": "wifi-permissions",
|
||||
"font_class": "wifi-permissions",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Loading…
Reference in New Issue