Fix icons by switching to react-icons

This commit is contained in:
Daniel Schädler 2025-03-15 13:40:50 +01:00
parent 2f793fecdb
commit 2800cefdd9
5 changed files with 13 additions and 52 deletions

View File

@ -1,9 +1,6 @@
import React, {useState, useEffect, useRef} from 'react';
import {Button, ButtonGroup} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faStar as filledStar} from '@fortawesome/free-solid-svg-icons';
import {faStar as emptyStar} from '@fortawesome/free-regular-svg-icons';
import {faHeartCirclePlus, faArrowCircleRight} from '@fortawesome/free-solid-svg-icons';
import {FaHeartCirclePlus, FaRegHeart, FaHeart, FaArrowTurnDown} from 'react-icons/fa6';
export function FavoriteBar({teams}) {
const [favorite, setFavorite] = useState(null);
@ -89,7 +86,7 @@ export function FavoriteBar({teams}) {
<p className="m-2">{favorite ? favorite.name : ''}</p>
<ButtonGroup className="m-2">
<Button title="Favorit Auswahlmenü öffnen/schließen" onClick={() => setIsVisible(!isVisible)}>
<FontAwesomeIcon icon={faHeartCirclePlus}/>
<FaHeartCirclePlus />
</Button>
{favorite && (
<Button
@ -97,7 +94,7 @@ export function FavoriteBar({teams}) {
onClick={scrollToFavorite}
className={isPulsing ? 'pulse-animation' : ''}
>
<FontAwesomeIcon icon={faArrowCircleRight}/>
<FaArrowTurnDown />
</Button>
)}
</ButtonGroup>
@ -107,9 +104,7 @@ export function FavoriteBar({teams}) {
{sortedTeams.map(team => (
<div key={team.id} style={{display: 'flex', alignItems: 'center'}}>
<Button onClick={() => toggleFavorite(team)} style={{marginRight: '10px'}}>
<FontAwesomeIcon
icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
/>
{favorite && favorite.id === team.id ? <FaHeart /> : <FaRegHeart />}
</Button>
<span>
{team.name}

View File

@ -1,7 +1,6 @@
import React, {useState, useEffect} from 'react';
import {Button} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faArrowUp} from '@fortawesome/free-solid-svg-icons';
import {FaCircleArrowUp} from 'react-icons/fa6';
export function ScrollToTopButton() {
const [isVisible, setIsVisible] = useState(false);
@ -38,7 +37,7 @@ export function ScrollToTopButton() {
pointerEvents: isVisible ? 'auto' : 'none'
}}
>
<FontAwesomeIcon icon={faArrowUp} />
<FaCircleArrowUp/>
</Button>
);
}
}

View File

@ -13,10 +13,6 @@
"author": "",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-regular-svg-icons": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/react-fontawesome": "^0.2.2",
"@zeit/next-css": "^1.0.1",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
@ -26,6 +22,7 @@
"qrcode.react": "^3.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^5.5.0",
"react-notify-toast": "^0.5.1",
"react-pose": "^4.0.10",
"react-redux": "^8.0.2",

View File

@ -8,8 +8,6 @@ import {
import {TurniereNavigation} from '../js/components/Navigation';
import {BigImage} from '../js/components/BigImage';
import {Footer} from '../js/components/Footer';
import '@fortawesome/fontawesome-svg-core/styles.css';
import {config} from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

View File

@ -43,39 +43,6 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
integrity sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==
"@fortawesome/fontawesome-svg-core@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz#0ac6013724d5cc327c1eb81335b91300a4fce2f2"
integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/free-regular-svg-icons@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz#f1651e55e6651a15589b0569516208f9c65f96db"
integrity sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/free-solid-svg-icons@^6.7.2":
version "6.7.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz#fe25883b5eb8464a82918599950d283c465b57f6"
integrity sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.7.2"
"@fortawesome/react-fontawesome@^0.2.2":
version "0.2.2"
resolved "https://artifactory.1and1.org/artifactory/api/npm/bit-npm-virtual/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz#68b058f9132b46c8599875f6a636dad231af78d4"
integrity sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==
dependencies:
prop-types "^15.8.1"
"@humanwhocodes/config-array@^0.9.2":
version "0.9.5"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@ -5861,6 +5828,11 @@ react-fast-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-icons@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"