230 lines
10 KiB
Vue
230 lines
10 KiB
Vue
<template>
|
|
<text class="fa-icon" :class="[prefix]" :style="iconStyle">{{ unicode }}</text>
|
|
</template>
|
|
|
|
<script>
|
|
const MAP = {
|
|
// 基础
|
|
home:'\uf015', list:'\uf022', 'list-check':'\uf14a', 'list-ul':'\uf0ca',
|
|
check:'\uf00c', 'check-circle':'\uf058', 'check-double':'\uf560',
|
|
xmark:'\uf00d', close:'\uf00d',
|
|
plus:'\uf0fe', minus:'\uf056',
|
|
search:'\uf002',
|
|
user:'\uf007', users:'\uf0c0', 'user-plus':'\uf234', 'user-check':'\uf4fc',
|
|
gear:'\uf013', settings:'\uf013', 'user-gear':'\uf4ff',
|
|
envelope:'\uf0e0', mail:'\uf0e0', 'envelope-open':'\uf2b6',
|
|
phone:'\uf095', 'phone-volume':'\uf2a0',
|
|
bell:'\uf0f3', 'bell-slash':'\uf1f6',
|
|
heart:'\uf004', 'heart-crack':'\uf7a9',
|
|
star:'\uf005', 'star-half-stroke':'\uf5c0',
|
|
camera:'\uf030',
|
|
image:'\uf03e', picture:'\uf03e',
|
|
// 日历 / 时间
|
|
calendar:'\uf073', 'calendar-day':'\uf783', 'calendar-week':'\uf784',
|
|
'calendar-days':'\uf1b3', 'calendar-check':'\uf274', 'calendar-xmark':'\uf273',
|
|
'calendar-plus':'\uf271', 'calendar-minus':'\uf272',
|
|
clock:'\uf017', 'clock-rotate-left':'\uf1da', time:'\uf017',
|
|
'hourglass-half':'\uf252', 'hourglass-start':'\uf251', 'hourglass-end':'\uf253',
|
|
// 位置 / 导航
|
|
'location-dot':'\uf601', location:'\uf601', 'map-pin':'\uf276',
|
|
'map-location-dot':'\uf62a', 'map':'\uf279', route:'\uf4d7', compass:'\uf14e',
|
|
// 箭头
|
|
'chevron-right':'\uf054', 'chevron-left':'\uf053',
|
|
'chevron-up':'\uf077', 'chevron-down':'\uf078',
|
|
'arrow-up':'\uf062', 'arrow-down':'\uf063',
|
|
'arrow-right':'\uf061', 'arrow-left':'\uf060',
|
|
'arrow-up-right-from-square':'\uf08e', 'arrow-right-to-bracket':'\uf090',
|
|
'arrow-rotate-right':'\uf021', 'arrow-rotate-left':'\uf0e2',
|
|
back:'\uf053', forward:'\uf04e',
|
|
'angles-right':'\uf105', 'angles-left':'\uf104', 'angles-up':'\uf102', 'angles-down':'\uf103',
|
|
// 工具
|
|
filter:'\uf0b0', sliders:'\uf1de', sort:'\uf0dc', 'sort-asc':'\uf0de', 'sort-desc':'\uf0dd',
|
|
sparkles:'\uf72b', 'wand-magic-sparkles':'\uf72b', 'wand-magic':'\uf72b',
|
|
// 状态
|
|
'circle-info':'\uf05a', info:'\uf05a',
|
|
'circle-exclamation':'\uf06a', 'triangle-exclamation':'\uf071',
|
|
'circle-question':'\uf059', 'circle-half-stroke':'\uf042',
|
|
'circle-check':'\uf058', 'circle-xmark':'\uf05c',
|
|
'circle-plus':'\uf055', 'circle-minus':'\uf056', 'circle-dot':'\uf192',
|
|
eye:'\uf06e', 'eye-slash':'\uf070',
|
|
lock:'\uf023', unlock:'\uf09c', 'lock-open':'\uf3c1',
|
|
// 编辑
|
|
tag:'\uf02b', tags:'\uf02c', bookmark:'\uf02e',
|
|
trash:'\uf1f8', delete:'\uf1f8',
|
|
'pen-to-square':'\uf044', edit:'\uf044', pen:'\uf304', pencil:'\uf040',
|
|
'file-lines':'\uf15c', file:'\uf15c', 'file-pen':'\uf31c',
|
|
// 图表
|
|
'chart-simple':'\uf7a5',
|
|
'chart-column':'\uf7ae', 'chart-bar':'\uf080',
|
|
'chart-line':'\uf201', 'chart-pie':'\uf200', 'chart-area':'\uf1fe',
|
|
'chart-gantt':'\uf7a0', 'chart-bullet':'\uf7a1',
|
|
// 财务
|
|
'dollar-sign':'\uf155', 'yen-sign':'\uf157', 'yuan-sign':'\uf157',
|
|
coins:'\uf1e3', wallet:'\uf555', 'credit-card':'\uf09d', 'money-bill':'\uf2e1',
|
|
'money-bill-wave':'\uf53a', 'money-bill-trend-up':'\uf4f9', 'money-bill-transfer':'\uf4f8',
|
|
'sack-dollar':'\uf81d', 'hand-holding-dollar':'\uf4c0',
|
|
gift:'\uf06b',
|
|
// 成就 / 游戏
|
|
trophy:'\uf091', medal:'\uf5a2', award:'\uf559', crown:'\uf52a',
|
|
fire:'\uf06d', bolt:'\uf0e7', gem:'\uf3a5',
|
|
bullseye:'\uf140', target:'\uf140', rocket:'\uf135',
|
|
'flag-checkered':'\uf11e', flag:'\uf024', 'bookmark-star':'\uf7a1',
|
|
// 菜单
|
|
menu:'\uf0c9', bars:'\uf0c9', 'grip-vertical':'\uf58e', 'grip-lines':'\uf7a4',
|
|
ellipsis:'\uf141', 'ellipsis-vertical':'\uf142',
|
|
// 通讯
|
|
comment:'\uf075', comments:'\uf086', 'comment-dots':'\uf4ad',
|
|
'paper-plane':'\uf1d8',
|
|
// 电源
|
|
'power-off':'\uf011',
|
|
// 文件 / 文件夹
|
|
cloud:'\uf0c2', 'cloud-arrow-up':'\uf382', 'cloud-arrow-down':'\uf37d',
|
|
folder:'\uf07b', 'folder-open':'\uf07c', 'folder-plus':'\uf65e',
|
|
circle:'\uf111', 'circle-notch':'\uf1ce',
|
|
code:'\uf121', terminal:'\uf120',
|
|
link:'\uf08c', unlink:'\uf127', 'link-slash':'\uf127',
|
|
shield:'\uf132', 'shield-halved':'\uf3ed', 'shield-check':'\uf2f7',
|
|
download:'\uf019', upload:'\uf093',
|
|
share:'\uf064', 'share-nodes':'\uf504',
|
|
copy:'\uf0c5', save:'\uf0c7', paste:'\uf0ea',
|
|
rotate:'\uf2f1', refresh:'\uf021', sync:'\uf021', 'arrows-rotate':'\uf021',
|
|
signout:'\uf2f5', 'right-from-bracket':'\uf2f5', 'right-to-bracket':'\uf2f6',
|
|
qrcode:'\uf029', barcode:'\uf02a',
|
|
// 主题
|
|
palette:'\uf53f', 'palette-flushed':'\uf7a2', paintbrush:'\uf1fc',
|
|
sun:'\uf185', moon:'\uf186', 'cloud-sun':'\uf6c4', 'cloud-moon':'\uf6c3',
|
|
// 媒体
|
|
'volume-high':'\uf0d7', 'volume-low':'\uf027', 'volume-off':'\uf026', 'volume-xmark':'\uf6a9',
|
|
headphones:'\uf025', music:'\uf001', microphone:'\uf130', 'microphone-lines':'\uf130',
|
|
play:'\uf04b', pause:'\uf04c', stop:'\uf04d', forward:'\uf04e', backward:'\uf04a',
|
|
// 设备
|
|
idcard:'\uf2c2', mobile:'\uf10b', tablet:'\uf3fa', laptop:'\uf109', desktop:'\uf390',
|
|
wifi:'\uf1eb', bluetooth:'\uf293', signal:'\uf012', battery:'\uf240',
|
|
keyboard:'\uf11c', mouse:'\uf8cc',
|
|
// 建筑 / 地点
|
|
briefcase:'\uf0b1', building:'\uf1ad', store:'\uf54e', shop:'\uf54f',
|
|
cart:'\uf07a', 'cart-shopping':'\uf07a', bag:'\uf290', 'bag-shopping':'\uf290',
|
|
bed:'\uf236', house:'\uf015', 'house-chimney':'\uf3f0',
|
|
// 食物 / 饮品
|
|
utensils:'\uf2e7', coffee:'\uf0f4', mug:'\uf7b6', 'mug-hot':'\uf7b6', 'mug-saucer':'\uf7b5',
|
|
'bowl-food':'\uf830', 'bowl-rice':'\uf830', 'pizza-slice':'\uf818',
|
|
'burger':'\uf805', 'ice-cream':'\uf810', cookie:'\uf563',
|
|
// 健康 / 运动
|
|
dumbbell:'\uf44b', 'heart-pulse':'\uf21e', 'heartbeat':'\uf21e',
|
|
hospital:'\uf0f8', pill:'\uf484', stethoscope:'\uf0f1',
|
|
'person-walking':'\uf554', 'person-running':'\uf70c', 'person-biking':'\uf63a',
|
|
'person-hiking':'\uf6ee', bicycle:'\uf206', 'car-side':'\uf5e4',
|
|
// 学习 / 知识
|
|
book:'\uf02d', 'book-open':'\uf518', 'bookmark':'\uf02e',
|
|
'book-bookmark':'\uf7a1', 'book-open-reader':'\uf5da',
|
|
'graduation-cap':'\uf19d', pen:'\uf304', pencil:'\uf040',
|
|
lightbulb:'\uf0eb', 'face-smile':'\uf118', 'face-smile-beam':'\uf5b8',
|
|
'face-meh':'\uf11a', 'face-frown':'\uf119', 'face-grin':'\uf580',
|
|
'face-laugh':'\uf599', 'face-grin-stars':'\uf587',
|
|
// 自然
|
|
leaf:'\uf06c', seedling:'\uf32d', tree:'\uf1bb', 'tree-deciduous':'\uf1bb',
|
|
mountain:'\uf6fc', 'mountain-sun':'\uf7a2', water:'\uf773',
|
|
// 工具 / 维修
|
|
hammer:'\uf6e4', wrench:'\uf0ad', tools:'\uf7d9', screwdriver:'\uf7d8',
|
|
key:'\uf084', lock:'\uf023',
|
|
// 法律 / 商务
|
|
'scale-balanced':'\uf24e', 'gavel':'\uf0e3', 'briefcase':'\uf0b1',
|
|
'file-contract':'\uf56c', 'file-invoice':'\uf570', 'file-invoice-dollar':'\uf571',
|
|
// 人
|
|
hand:'\uf25b', 'hand-back-fist':'\uf255', 'hand-fist':'\uf255',
|
|
'hand-holding':'\uf4bd', 'hand-holding-heart':'\uf4be',
|
|
'thumbs-up':'\uf164', 'thumbs-down':'\uf165',
|
|
'user-shield':'\uf502', 'user-tie':'\uf508', 'user-graduate':'\uf501',
|
|
'user-astronaut':'\uf4fb',
|
|
angel:'\uf529', child:'\uf1ae', baby:'\uf77c', 'user-nurse':'\uf82f',
|
|
'user-doctor':'\uf0f0', 'user-tag':'\uf507',
|
|
// 地址 / 标识
|
|
'address-book':'\uf2b9', 'id-badge':'\uf2c1', 'address-card':'\uf2bb',
|
|
'file-clipboard':'\uf5ea', 'clipboard-list':'\uf46d', 'clipboard-check':'\uf46c',
|
|
// 文件夹树
|
|
'folder-tree':'\uf802', 'folder-closed':'\uf1e3',
|
|
// 杂项
|
|
thumbtack:'\uf08d', 'map-pin':'\uf276', 'thumb-tack':'\uf08d',
|
|
guitar:'\uf7a6', music:'\uf001', drum:'\uf569',
|
|
'flag':'\uf024', 'paw':'\uf1b0', 'bone':'\uf5d7',
|
|
// 文件类型
|
|
'file-pdf':'\uf1c1', 'file-word':'\uf1c2', 'file-excel':'\uf1c3',
|
|
'file-powerpoint':'\uf1c4', 'file-archive':'\uf1c6',
|
|
'file-image':'\uf1c5', 'file-video':'\uf1c8', 'file-audio':'\uf1c7',
|
|
'file-code':'\uf1c9', 'file-csv':'\uf6dd',
|
|
// 网络 / 连接
|
|
'globe':'\uf0ac', 'earth-asia':'\uf57e', 'network-wired':'\uf6ff',
|
|
'server':'\uf233', 'database':'\uf1c0', 'hdd':'\uf0a0',
|
|
// 箭头
|
|
'arrow-trend-up':'\uf098', 'arrow-trend-down':'\uf097',
|
|
'up-right-and-down-left-from-center':'\uf424',
|
|
'down-left-and-up-right-to-center':'\uf422',
|
|
'maximize':'\uf31e', 'minimize':'\uf78c', 'expand':'\uf065', 'compress':'\uf066',
|
|
// 其他常用
|
|
'hashtag':'\uf292', 'at':'\uf1fa', 'percent':'\uf295', 'divide':'\uf529',
|
|
'plus':'\uf0fe', 'minus':'\uf056', 'equals':'\uf7a0',
|
|
'infinity':'\uf534', 'less-than':'\uf7a0', 'greater-than':'\uf7a0',
|
|
// 心情 / 表情
|
|
'face-sad-tear':'\uf5b4', 'face-grin-beam':'\uf582', 'face-grin-hearts':'\uf584',
|
|
'face-kiss':'\uf596', 'face-kiss-beam':'\uf597', 'face-kiss-wink-heart':'\uf598',
|
|
'face-laugh-beam':'\uf59a', 'face-laugh-squint':'\uf59b',
|
|
'face-tired':'\uf5c8', 'face-rolling-eyes':'\uf5a5',
|
|
'face-smile-wink':'\uf4da', 'face-smile-plus':'\uf5b9',
|
|
// 状态指示
|
|
'circle-arrow-up':'\uf0aa', 'circle-arrow-down':'\uf0ab',
|
|
'circle-arrow-right':'\uf0a9', 'circle-arrow-left':'\uf0a8',
|
|
'triangle-exclamation':'\uf071', 'triangle':'\uf2ec',
|
|
'square':'\uf0c8', 'square-check':'\uf14a', 'square-plus':'\uf0fe',
|
|
// 默认回退
|
|
default:'\uf2dc', fallback:'\uf2dc'
|
|
}
|
|
|
|
export default {
|
|
name: 'FaIcon',
|
|
props: {
|
|
icon: { type: String, required: true },
|
|
size: { type: [String, Number], default: 'inherit' },
|
|
color: { type: String, default: '' },
|
|
prefix: { type: String, default: 'fas' }
|
|
},
|
|
computed: {
|
|
iconStyle() {
|
|
const s = {}
|
|
if (this.size !== 'inherit') {
|
|
s.fontSize = typeof this.size === 'number' ? this.size + 'rpx' : this.size
|
|
}
|
|
if (this.color) s.color = this.color
|
|
return s
|
|
},
|
|
unicode() { return MAP[this.icon] || MAP.fallback }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fa-icon {
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-rendering: auto;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.fa-icon.fab, .fa-icon.fa-brands {
|
|
font-family: 'Font Awesome 6 Brands';
|
|
font-weight: 400;
|
|
}
|
|
.fa-icon.far, .fa-icon.fa-regular { font-weight: 400; }
|
|
/* 点击态 */
|
|
.fa-icon.clickable {
|
|
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
}
|
|
.fa-icon.clickable:active {
|
|
transform: scale(0.92);
|
|
opacity: 0.75;
|
|
}
|
|
</style>
|