Merge pull request #753 from acelaya-forks/feature/fa-7

Update to FownAwesome 7

Author: acelaya

CHANGELOG.md

@@ -4,12 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.16.0] - 2025-07-28
 ### Added
 * *Nothing*
 
 ### Changed
-* *Nothing*
+* Update to FontAwesome 7
 
 ### Deprecated
 * *Nothing*

Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.53.1-noble
+FROM mcr.microsoft.com/playwright:v1.54.1-noble
 
 ENV NODE_VERSION 22.15
 ENV TINI_VERSION v0.19.0

package-lock.json

@@ -40,13 +40,13 @@
     "dev:sub-route": "vite serve --host 0.0.0.0 --port 3003 --base=\"/sub/route\""
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^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",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-brands-svg-icons": "^7.0.0",
+    "@fortawesome/free-regular-svg-icons": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^0.2.3",
     "@reduxjs/toolkit": "^2.5.0",
-    "@shlinkio/shlink-frontend-kit": "^1.0.1",
+    "@shlinkio/shlink-frontend-kit": "^1.1.0",
     "@shlinkio/shlink-js-sdk": "^2.0.0",
     "react": "^19.1",
     "react-dom": "^19.1",

package.json

@@ -56,23 +56,23 @@ export const AsideMenu: FC<AsideMenuProps> = ({ routePrefix, showOnMobile = fals
     >
       <nav className="flex flex-col h-full">
         <AsideMenuItem to={buildPath('/overview')}>
-          <FontAwesomeIcon fixedWidth icon={overviewIcon} />
+          <FontAwesomeIcon icon={overviewIcon} />
           Overview
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/list-short-urls/1')} active={pathname.match('/list-short-urls') !== null}>
-          <FontAwesomeIcon fixedWidth icon={listIcon} />
+          <FontAwesomeIcon icon={listIcon} />
           List short URLs
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/create-short-url')}>
-          <FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
+          <FontAwesomeIcon icon={createIcon} flip="horizontal" />
           Create short URL
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/manage-tags')}>
-          <FontAwesomeIcon fixedWidth icon={tagsIcon} />
+          <FontAwesomeIcon icon={tagsIcon} />
           Manage tags
         </AsideMenuItem>
         <AsideMenuItem to={buildPath('/manage-domains')}>
-          <FontAwesomeIcon fixedWidth icon={domainsIcon} />
+          <FontAwesomeIcon icon={domainsIcon} />
           Manage domains
         </AsideMenuItem>
       </nav>

src/common/AsideMenu.tsx

@@ -28,7 +28,7 @@ const DefaultDomain: FC = () => {
     <>
       <FontAwesomeIcon
         {...anchor}
-        fixedWidth
+
         icon={defaultDomainIcon}
         className="text-lm-brand dark:text-dm-brand"
         data-testid="default-domain-icon"

src/domains/DomainRow.tsx

@@ -33,7 +33,7 @@ export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedi
           className="gap-1.5"
           to={`${routesPrefix}/domain/${domain.domain}${domain.isDefault ? `_${DEFAULT_DOMAIN}` : ''}/visits`}
         >
-          <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+          <FontAwesomeIcon icon={pieChartIcon} /> Visit stats
         </RowDropdown.Item>
         <RowDropdown.Item
           className="gap-1.5"
@@ -43,21 +43,21 @@ export const DomainDropdown: FC<DomainDropdownProps> = ({ domain, editDomainRedi
             query: domain.domain,
           })}
         >
-          <FontAwesomeIcon icon={lineChartIcon} fixedWidth /> Compare visits
+          <FontAwesomeIcon icon={lineChartIcon} /> Compare visits
         </RowDropdown.Item>
 
         {canFilterShortUrlsByDomain && (
           <RowDropdown.Item
             className="gap-1.5"
             to={`${routesPrefix}/list-short-urls/1?domain=${domain.isDefault ? DEFAULT_DOMAIN : domain.domain}`}
           >
-            <FontAwesomeIcon icon={listIcon} fixedWidth /> Short URLs
+            <FontAwesomeIcon icon={listIcon} /> Short URLs
           </RowDropdown.Item>
         )}
 
         <RowDropdown.Separator />
         <RowDropdown.Item onClick={openModal} className="gap-1.5">
-          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit redirects
+          <FontAwesomeIcon icon={editIcon} /> Edit redirects
         </RowDropdown.Item>
       </RowDropdown>
 

src/domains/helpers/DomainDropdown.tsx

@@ -18,13 +18,13 @@ export const DomainStatusIcon: FC<DomainStatusIconProps> = ({ status }) => {
   const { anchor, tooltip } = useTooltip();
 
   if (status === 'validating') {
-    return <FontAwesomeIcon fixedWidth icon={loadingStatusIcon} spin />;
+    return <FontAwesomeIcon icon={loadingStatusIcon} spin />;
   }
 
   return (
     <span {...anchor}>
       <FontAwesomeIcon
-        fixedWidth
+
         icon={status === 'valid' ? checkIcon : invalidIcon}
         className={clsx({ 'text-danger': status !== 'valid' })}
       />

src/domains/helpers/DomainStatusIcon.tsx

@@ -141,7 +141,7 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
             <QrFormatDropdown format={format} onChange={(format) => setQrOption({ format })} />
             <div className="flex items-center gap-2">
               <Button onClick={copy} aria-label="Copy data URI" title="Copy data URI" className="h-full">
-                <FontAwesomeIcon icon={copied ? faCheck : faClone} fixedWidth />
+                <FontAwesomeIcon icon={copied ? faCheck : faClone} />
               </Button>
               <Button solid onClick={downloadQrCode} className="grow">
                 Download <FontAwesomeIcon icon={downloadIcon} />