override footer.js pwa

Question

how to override footer.js Can anyone help me.? I want to add an Icon in the footer. I have also added a file. but not working. and the icon name is "file"

below file path for my local directory.

pwamagento/src/components/Footer/footer.js

import React, { Fragment } from 'react';
import { Facebook, Instagram, Twitter, File } from 'react-feather';
import { FormattedMessage, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { shape, string } from 'prop-types';
import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';

import Logo from '@magento/venia-ui/lib/components/Logo';
import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
import { useStyle } from '@magento/venia-ui/lib/classify';
import defaultClasses from '@magento/venia-ui/lib/components/Footer/footer.module.css';  
import { DEFAULT_LINKS, LOREM_IPSUM } from '@magento/venia-ui/lib/components/Footer/sampleData';
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';

const Footer = props => {
const { links } = props;
const classes = useStyle(defaultClasses, props.classes);
const talonProps = useFooter();

const { copyrightText } = talonProps;
const { formatMessage } = useIntl();
const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });

const linkGroups = Array.from(links, ([groupKey, linkProps]) => {
    const linkElements = Array.from(linkProps, ([text, pathInfo]) => {
        let path = pathInfo;
        let Component = Fragment;
        if (pathInfo && typeof pathInfo === 'object') {
            path = pathInfo.path;
            Component = pathInfo.Component;
        }

        const itemKey = `text: ${text} path:${path}`;
        const child = path ? (
            <Link data-cy="Footer-link" className={classes.link} to={path}>
                <FormattedMessage id={text} defaultMessage={text} />
            </Link>
        ) : (
            <span data-cy="Footer-label" className={classes.label}>
                <FormattedMessage id={text} defaultMessage={text} />
            </span>
        );

        return (
            <Component key={itemKey}>
                <li className={classes.linkItem}>{child}</li>
            </Component>
        );
    });

    return (
        <ul key={groupKey} className={classes.linkGroup}>
            {linkElements}
        </ul>
    );
});

return (
    <footer data-cy="Footer-root" className={classes.root}>
        <div className={classes.links}>
            {linkGroups}
            <div className={classes.callout}>
                <span
                    data-cy="Footer-calloutHeading"
                    className={classes.calloutHeading}
                >
                    <FormattedMessage
                        id={'footer.followText'}
                        defaultMessage={'Follow Us!'}
                    />
                </span>
                <p
                    data-cy="Footer-calloutText"
                    className={classes.calloutBody}
                >
                    <FormattedMessage
                        id={'footer.calloutText'}
                        defaultMessage={LOREM_IPSUM}
                    />
                </p>
                <ul className={classes.socialLinks}>
                    <li>
                        <Instagram size={20} />
                    </li>
                    <li>
                        <Facebook size={20} />
                    </li>
                    <li>
                        <Twitter size={20} />
                    </li>
                    <li>
                        <File size={20} />
                    </li>
                </ul>
            </div>
            <Newsletter />
        </div>
        <div className={classes.branding}>
            <ul className={classes.legal}>
                <li data-cy="Footer-terms" className={classes.terms}>
                    <FormattedMessage
                        id={'footer.termsText'}
                        defaultMessage={'Terms of Use'}
                    />
                </li>
                <li data-cy="Footer-privacy" className={classes.privacy}>
                    <FormattedMessage
                        id={'footer.privacyText'}
                        defaultMessage={'Privacy Policy'}
                    />
                </li>
            </ul>
            <p className={classes.copyright}>{copyrightText || null}</p>
            <Link
                to={resourceUrl('/')}
                aria-label={title}
                className={classes.logoContainer}
            >
                <Logo classes={{ logo: classes.logo }} />
            </Link>
        </div>
    </footer>
   );
 };

 export default Footer;

Footer.defaultProps = {
   links: DEFAULT_LINKS
};

Footer.propTypes = {
  classes: shape({
    root: string
 })
 };

Answer 1

I reviewed your code in the footer.js file the code is okay they do not have any issues or bugs but I think you missed some files when you had to override the component.

Please refer to my answer about another PWA override component issue they can help you override the footer component.

how to override .js file in PWA.?

For more information, you can refer to the Magento official document guide https://developer.adobe.com/commerce/pwa-studio/tutorials/basic-modifications/modify-footer/