Vite SVG icon 적용 안 됨

배경

구름에서 프로젝트틀 진행하는 중 React를 사용해야 해서 Vite를 이용하고 피그마에서 사용한 .svg icon을 적용하려고 했지만 계속 적용이 안되는 에러가 발생했다. 검색해서 크게 2가지 방법이 있었지만 2개다 해결책이 되지 못했다

과정

react-icons/fa'를 사용하다가 SVG를 사용하게 되었다.

import { FaHome, FaMoneyBillWave, FaCoffee, FaEllipsisH, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import './Navigation.css';

const Navigation = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);

    const navItems = [
        { to: '/', icon: <FaHome />, label: 'Home' },
        { to: '/pay', icon: <FaMoneyBillWave />, label: 'Pay' },
        { to: '/order', icon: <FaCoffee />, label: 'Order' },
        { to: '/other', icon: <FaEllipsisH />, label: 'Other' },
    ];

    const toggleCollapse = () => {
        setIsCollapsed(!isCollapsed);
    };

    return (
        <>
            <nav className={`bottom-nav ${isCollapsed ? 'collapsed' : ''}`}>
                <div className="nav-logo">
                    <h2>Starbucks</h2>
                </div>

                <div className="nav-menu">
                    {navItems.map((item) => (
                        <NavLink
                            key={item.to}
                            to={item.to}
                            className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
                        >
                            <span className="nav-icon">{item.icon}</span>
                            <span className="nav-label">{item.label}</span>
                        </NavLink>
                    ))}
                </div>

             // ...

SVG 사용전

아주 무난하게 사용되었다.

SVG 사용후

그냥 빈화면이 나오게 되었다.

해결법

계속 계속 방법을 찾다가 어쩔 수 없이 vite 버전을 바꾸니깐 정상적으로 동작하게 되었다.

package.json에서 vite 버전 변경

// 변경전 (최신버전)
"vite": "^6.3.5"
// 변경후
"vite": "^5.2.10",

import HomeSVG from '../assets/icons/home.svg?react';
import PaySVG from '../assets/icons/pay.svg?react';
import OrderSVG from '../assets/icons/order.svg?react';
import OtherSVG from '../assets/icons/other.svg?react';

import './Navigation.css';

const Navigation = () => {
    const navItems = [
        { to: '/', icon: <HomeSVG />, label: 'Home' },
        { to: '/pay', icon: <PaySVG />, label: 'Pay' },
        { to: '/order', icon: <OrderSVG />, label: 'Order' },
        { to: '/other', icon: <OtherSVG />, label: 'Other' },
    ];