Adds support for font-awesome icons

This commit is contained in:
2023-08-13 15:21:58 +02:00
parent 9844498c95
commit 4400eb5219
5 changed files with 28 additions and 2 deletions

10
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "flanders", "name": "flanders",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"js-yaml": "^4.1.0" "js-yaml": "^4.1.0"
}, },
@@ -463,6 +464,15 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0" "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-free": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
"integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@humanwhocodes/config-array": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.10", "version": "0.11.10",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

View File

@@ -37,6 +37,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"js-yaml": "^4.1.0" "js-yaml": "^4.1.0"
} }

View File

@@ -1,7 +1,8 @@
title: 'Hello World !!' title: 'Hello World !!'
subtitle: 'actually, I am a new pilot.' subtitle: 'actually, I am a new pilot.'
logo: 'icon-any.svg' logo: 'icon-any.svg'
asmask: true icon: 'fa fa-cloud'
asmask: false
services: services:
- title: '/Cloud' - title: '/Cloud'

View File

@@ -20,14 +20,16 @@
<img src={brand.logo} alt="logo" /> <img src={brand.logo} alt="logo" />
{/if} {/if}
{:else if brand.icon} {:else if brand.icon}
<p>an icon</p> <i class="fa-fw {brand.icon}" />
{/if} {/if}
</div> </div>
<style> <style>
.container { .container {
width: var(--size); width: var(--size);
min-width: min-content;
height: var(--size); height: var(--size);
font-size: var(--size);
} }
.masked { .masked {
@@ -37,4 +39,11 @@
-webkit-mask: var(--mask) center no-repeat; -webkit-mask: var(--mask) center no-repeat;
-webkit-mask-size: var(--size); -webkit-mask-size: var(--size);
} }
div {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
</style> </style>

View File

@@ -0,0 +1,5 @@
<script lang="ts">
import '@fortawesome/fontawesome-free/css/all.min.css';
</script>
<slot />