[WIP] Use FontAwesome Component for Vue (#3127)

* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* ✌️

* ✌️

* wip

* wip

* Clean up

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -11,13 +11,13 @@
 			@dragend="onDragend"
 			@contextmenu.prevent.stop="onContextmenu">
 		<button class="toggleActive" @click="toggleActive" v-if="isStacked">
-			<template v-if="active">%fa:angle-up%</template>
-			<template v-else>%fa:angle-down%</template>
+			<template v-if="active"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
 		</button>
 		<slot name="header"></slot>
 		<span class="count" v-if="count > 0">({{ count }})</span>
-		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
-		<button v-else class="close" @click.stop="close">%fa:times%</button>
+		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
+		<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -163,7 +163,7 @@ export default Vue.extend({
 
 		getMenu() {
 			const items = [{
-				icon: '%fa:pencil-alt%',
+				icon: 'pencil-alt',
 				text: '%i18n:common.deck.rename%',
 				action: () => {
 					(this as any).apis.input({
@@ -175,43 +175,43 @@ export default Vue.extend({
 					});
 				}
 			}, null, {
-				icon: '%fa:arrow-left%',
+				icon: 'arrow-left',
 				text: '%i18n:common.deck.swap-left%',
 				action: () => {
 					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
-				icon: '%fa:arrow-right%',
+				icon: 'arrow-right',
 				text: '%i18n:common.deck.swap-right%',
 				action: () => {
 					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: '%fa:arrow-up%',
+				icon: 'arrow-up',
 				text: '%i18n:common.deck.swap-up%',
 				action: () => {
 					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
-				icon: '%fa:arrow-down%',
+				icon: 'arrow-down',
 				text: '%i18n:common.deck.swap-down%',
 				action: () => {
 					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				icon: '%fa:window-restore R%',
+				icon: ['far', 'window-restore'],
 				text: '%i18n:common.deck.stack-left%',
 				action: () => {
 					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				icon: '%fa:window-maximize R%',
+				icon: ['far', 'window-maximize'],
 				text: '%i18n:common.deck.pop-right%',
 				action: () => {
 					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				icon: '%fa:trash-alt R%',
+				icon: ['far', 'trash-alt'],
 				text: '%i18n:common.deck.remove%',
 				action: () => {
 					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
@@ -382,7 +382,7 @@ export default Vue.extend({
 			box-shadow 0 3px 0 0 var(--primary)
 
 		> span
-			[data-fa]
+			[data-icon]
 				margin-right 8px
 
 		> .count

src/client/app/desktop/views/pages/deck/deck.direct-column.vue

@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:envelope R%{{ name }}</span>
+	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
 
 	<x-direct/>
 </x-column>

src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue

@@ -1,7 +1,7 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:hashtag%<span>{{ tag }}</span>
+		<fa icon="hashtag"/><span>{{ tag }}</span>
 	</span>
 
 	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">

src/client/app/desktop/views/pages/deck/deck.mentions-column.vue

@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:at%{{ name }}</span>
+	<span slot="header"><fa icon="at"/>{{ name }}</span>
 
 	<x-mentions ref="tl"/>
 </x-column>

src/client/app/desktop/views/pages/deck/deck.note-column.vue

@@ -1,13 +1,13 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:comment-alt R%<span>{{ title }}</span>
+		<fa :icon="['far', 'comment-alt']"/><span>{{ title }}</span>
 	</span>
 
 	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
 		<div class="is-remote" v-if="note.user.host != null">
 			<details>
-				<summary>%fa:exclamation-triangle% %i18n:common.is-remote-post%</summary>
+				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-post%</summary>
 				<a :href="note.url || note.uri" target="_blank">%i18n:common.view-on-remote%</a>
 			</details>
 		</div>

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -21,8 +21,8 @@
 				:media-view="mediaView"
 				:mini="true"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
-				<span>%fa:angle-up%{{ note._datetext }}</span>
-				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
+				<span><fa icon="angle-up"/>{{ note._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
 	</div>
@@ -31,7 +31,7 @@
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">%i18n:@load-more%</template>
-			<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
+			<template v-if="moreFetching"><fa icon="spinner .pulse" fixed-width/></template>
 		</button>
 	</footer>
 </div>
@@ -236,7 +236,7 @@ export default Vue.extend({
 			span
 				margin 0 16px
 
-			[data-fa]
+			[data-icon]
 				margin-right 8px
 
 	> footer

src/client/app/desktop/views/pages/deck/deck.notification.vue

@@ -9,8 +9,8 @@
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}
-				%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}
+				<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -19,12 +19,12 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:retweet%
+				<fa icon="retweet"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -33,7 +33,7 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:user-plus%
+				<fa icon="user-plus"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -44,7 +44,7 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:user-clock%
+				<fa icon="user-clock"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
@@ -55,12 +55,12 @@
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div>
 			<header>
-				%fa:chart-pie%
+				<fa icon="chart-pie"/>
 				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage">
-				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+				<fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/>
 			</router-link>
 		</div>
 	</div>
@@ -151,7 +151,7 @@ export default Vue.extend({
 			> .note-ref
 				color var(--noteText)
 
-				[data-fa]
+				[data-icon]
 					font-size 1em
 					font-weight normal
 					font-style normal

src/client/app/desktop/views/pages/deck/deck.notifications-column.vue

@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">%fa:bell R%{{ name }}</span>
+	<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
 
 	<x-notifications/>
 </x-column>

src/client/app/desktop/views/pages/deck/deck.notifications.vue

@@ -11,13 +11,13 @@
 		<template v-for="(notification, i) in _notifications">
 			<x-notification class="notification" :notification="notification" :key="notification.id"/>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-				<span>%fa:angle-up%{{ notification._datetext }}</span>
-				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+				<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
+				<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
 	</component>
 	<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
-		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
+		<template v-if="fetchingMoreNotifications"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:@more%' }}
 	</button>
 	<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:@empty%</p>
 </div>
@@ -188,7 +188,7 @@ export default Vue.extend({
 			span
 				margin 0 16px
 
-			i
+			[data-icon]
 				margin-right 8px
 
 	> .more
@@ -207,7 +207,7 @@ export default Vue.extend({
 		&.fetching
 			cursor wait
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> .empty

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -1,12 +1,12 @@
 <template>
 <x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
 	<span slot="header">
-		<template v-if="column.type == 'home'">%fa:home%</template>
-		<template v-if="column.type == 'local'">%fa:R comments%</template>
-		<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
-		<template v-if="column.type == 'global'">%fa:globe%</template>
-		<template v-if="column.type == 'list'">%fa:list%</template>
-		<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
+		<template v-if="column.type == 'home'"><fa icon="home"/></template>
+		<template v-if="column.type == 'local'"><fa :icon="['far', 'comments']"/></template>
+		<template v-if="column.type == 'hybrid'"><fa icon="share-alt"/></template>
+		<template v-if="column.type == 'global'"><fa icon="globe"/></template>
+		<template v-if="column.type == 'list'"><fa icon="list"/></template>
+		<template v-if="column.type == 'hashtag'"><fa icon="hashtag"/></template>
 		<span>{{ name }}</span>
 	</span>
 
@@ -66,7 +66,7 @@ export default Vue.extend({
 		return {
 			edit: false,
 			menu: [{
-				icon: '%fa:cog%',
+				icon: 'cog',
 				text: '%i18n:@edit%',
 				action: () => {
 					this.edit = !this.edit;

src/client/app/desktop/views/pages/deck/deck.user-column.vue

@@ -1,19 +1,19 @@
 <template>
 <x-column>
 	<span slot="header">
-		%fa:user%<span>{{ title }}</span>
+		<fa icon="user"/><span>{{ title }}</span>
 	</span>
 
 	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
 		<div class="is-remote" v-if="user.host != null">
 			<details>
-				<summary>%fa:exclamation-triangle% %i18n:common.is-remote-user%</summary>
+				<summary><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%</summary>
 				<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a>
 			</details>
 		</div>
 		<header :style="bannerStyle">
 			<div>
-				<button class="menu" @click="menu" ref="menu">%fa:ellipsis-h%</button>
+				<button class="menu" @click="menu" ref="menu"><fa icon="ellipsis-h"/></button>
 				<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow"/>
 				<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 				<span class="name">{{ user | userName }}</span>
@@ -40,17 +40,17 @@
 			</div>
 		</div>
 		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned">%fa:thumbtack% %i18n:@pinned-notes%</p>
-			<span class="angle" v-if="showPinned">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> %i18n:@pinned-notes%</p>
+			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div class="notes" v-show="showPinned">
 				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 			</div>
 		</div>
 		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages">%fa:images R% %i18n:@images%</p>
-			<span class="angle" v-if="showImages">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> %i18n:@images%</p>
+			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showImages">
 				<router-link v-for="image in images"
 					:style="`background-image: url(${image.thumbnailUrl})`"
@@ -61,15 +61,15 @@
 			</div>
 		</div>
 		<div class="activity">
-			<p class="caption" @click="toggleShowActivity">%fa:chart-bar R% %i18n:@activity%</p>
-			<span class="angle" v-if="showActivity">%fa:angle-up%</span>
-			<span class="angle" v-else>%fa:angle-down%</span>
+			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> %i18n:@activity%</p>
+			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
+			<span class="angle" v-else><fa icon="angle-down"/></span>
 			<div v-show="showActivity">
 				<div ref="chart"></div>
 			</div>
 		</div>
 		<div class="tl">
-			<p class="caption">%fa:comment-alt R% %i18n:@timeline%</p>
+			<p class="caption"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</p>
 			<div>
 				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
 			</div>
@@ -294,7 +294,7 @@ export default Vue.extend({
 
 		menu() {
 			let menu = [{
-				icon: '%fa:list%',
+				icon: 'list',
 				text: '%i18n:@push-to-a-list%',
 				action: () => {
 					const w = (this as any).os.new(MkUserListsWindow);

src/client/app/desktop/views/pages/deck/deck.vue

@@ -14,7 +14,7 @@
 			<x-note-column v-else-if="temporaryColumn.type == 'note'" :note-id="temporaryColumn.noteId" :key="temporaryColumn.noteId"/>
 			<x-hashtag-column v-else-if="temporaryColumn.type == 'tag'" :tag="temporaryColumn.tag" :key="temporaryColumn.tag"/>
 		</template>
-		<button ref="add" @click="add" title="%i18n:common.deck.add-column%">%fa:plus%</button>
+		<button ref="add" @click="add" title="%i18n:common.deck.add-column%"><fa icon="plus"/></button>
 	</div>
 </mk-ui>
 </template>
@@ -182,7 +182,7 @@ export default Vue.extend({
 				source: this.$refs.add,
 				compact: true,
 				items: [{
-					icon: '%fa:home%',
+					icon: 'home',
 					text: '%i18n:common.deck.home%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -191,7 +191,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:comments R%',
+					icon: ['far', 'comments'],
 					text: '%i18n:common.deck.local%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -200,7 +200,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:share-alt%',
+					icon: 'share-alt',
 					text: '%i18n:common.deck.hybrid%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -209,7 +209,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:globe%',
+					icon: 'globe',
 					text: '%i18n:common.deck.global%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -218,7 +218,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:at%',
+					icon: 'at',
 					text: '%i18n:common.deck.mentions%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -227,7 +227,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:envelope R%',
+					icon: ['far', 'envelope'],
 					text: '%i18n:common.deck.direct%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -236,7 +236,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:list%',
+					icon: 'list',
 					text: '%i18n:common.deck.list%',
 					action: () => {
 						const w = (this as any).os.new(MkUserListsWindow);
@@ -250,7 +250,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:hashtag%',
+					icon: 'hashtag',
 					text: '%i18n:common.deck.hashtag%',
 					action: () => {
 						(this as any).apis.input({
@@ -264,7 +264,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:bell R%',
+					icon: ['far', 'bell'],
 					text: '%i18n:common.deck.notifications%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
@@ -273,7 +273,7 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					icon: '%fa:calculator%',
+					icon: 'calculator',
 					text: '%i18n:common.deck.widgets%',
 					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {

src/client/app/desktop/views/pages/deck/deck.widgets-column.vue

@@ -1,6 +1,6 @@
 <template>
 <x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
-	<span slot="header">%fa:calculator%{{ name }}</span>
+	<span slot="header"><fa icon="calculator"/>{{ name }}</span>
 
 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
 		<template v-if="edit">
@@ -37,7 +37,7 @@
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
-					<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+					<button class="remove" @click="removeWidget(widget)"><fa icon="times"/></button>
 					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
 				</div>
 			</x-draggable>
@@ -89,7 +89,7 @@ export default Vue.extend({
 
 	created() {
 		this.menu = [{
-			icon: '%fa:cog%',
+			icon: 'cog',
 			text: '%i18n:@edit%',
 			action: () => {
 				this.edit = !this.edit;