react: использование нескольких экспортных функций в одном файле

у меня есть файл icons.tsx в который я хочу разместить svg коды картинок:

const Icon1 = () => (
    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    </svg>
)

export default Icon1;

и соответственно использовать:

import Icon1 from '../icons/'

<Icon1 />

Все работает замечательно, когда в файле только 1 функция, но когда я пытаюсь разместить несколько функций

export const Icon1 = () => (...)
export const Icon2 = () => (...)
export const Icon3 = () => (...)


import {Icon1, Icon2, Icon3} from '../icons/'

<Icon1 />
<Icon2 />
<Icon3 />

, то валятся ошибки

когда использую

export const Icon1 = () => ... 

и

import Icon1 from './icons'

получаю has no default export. Did you mean to use 'import { Icon1 } from "projects"' instead?

когда использую

export default {Icon1, } 

и

import {Icon1} 

получаю has no exported member 'Icon1'. Did you mean to use 'import Icon1 from "projects"' instead?

Подскажите, что делаю не так и как реализовать корректно такую возможность

P.S.

такое использование svg файлов вместо <img src = 'icon1.svg' /> необходимо, чтобы можно было через css менять цвета картинки, без этого color и fill не работают :(

но если опять таки я просто что-то делаю не так, то буду благодарен совету