feat(frontend): load icons from svg files

This commit is contained in:
David Mosbach 2024-04-25 23:01:35 +00:00
parent ad71e165c6
commit 22781e1565
4 changed files with 37 additions and 3 deletions

View File

@ -9,6 +9,8 @@
@use "~@fortawesome/fontawesome-pro/scss/solid"
@use "icons.sass"
@font-face
font-family: "FRADrive Sans"
src: url('./../../static/wp-5.73/FRADriveSans-Regular.woff2') format('woff2'), url('./../../static/wp-5.73/FRADriveSans-Regular.woff') format('woff')

View File

@ -1,4 +1,4 @@
// SPDX-FileCopyrightText: 2022-2023 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>
// SPDX-FileCopyrightText: 2022-2024 Sarah Vaupel <sarah.vaupel@uniworx.de>, Gregor Kleen <gregor.kleen@ifi.lmu.de>,Sarah Vaupel <sarah.vaupel@ifi.lmu.de>,Sarah Vaupel <vaupel.sarah@campus.lmu.de>,Steffen Jost <jost@cip.ifi.lmu.de>,Wolfgang Witt <Wolfgang.Witt@campus.lmu.de>,David Mosbach <david.mosbach@uniworx.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
@ -27,9 +27,9 @@
--color-fontsec: #5b5861
// FONTS
--font-base: 'Arial', 'FRADrive Sans', sans-serif
--font-base: 'FRADrive Sans', 'Arial', sans-serif
--font-logo: var(--font-base)
--font-monospace: 'Arial Mono', 'FRADrive Mono', monospace
--font-monospace: 'FRADrive Mono', 'Arial Mono', monospace
// DIMENSIONS
--header-height: 100px

31
frontend/src/icons.sass Normal file
View File

@ -0,0 +1,31 @@
// SPDX-FileCopyrightText: 2024 David Mosbach <david.mosbach@uniworx.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design
@function icon-file($name)
@return url('../../assets/icons/fradrive/' + $name + '.svg')
@mixin base-icon($name)
background-image: icon-file($name)
background-size: contain
background-repeat: no-repeat
background-position: center
height: 50px
width: 50px
aspect-ratio: 1/1
filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%)
.inline-icon
display: inline-block
font-size: 2em
width: 2em
// Icons
.ico-check
@include base-icon(check)
.ico-close
@include base-icon(close)

View File

@ -29,6 +29,7 @@ const packageVersion = require('./package.json').version;
async function webpackConfig() {
const faviconNixDirectory = path.resolve(__dirname, '.nix-well-known');
const assetsDirectory = path.resolve(__dirname, 'assets');
let faviconApiVersion = undefined;
if (!fs.existsSync(faviconNixDirectory)) {