Custom icons don't change color like build-in ones

[MariuszKolotka]

I'm completly new to this enviroment and programming language but I decided to make an app in quasar. My problem is that when using build-in icons like for example "add" i can change its color but when using my custom icons that I import, Icons show properly, but the only way of changing its color is by changing fill in svg code. I read that setting it to "currentColor" will allow quasar to change color in code, but it doesn't work and when set up in such a way icons are always black
example of punktowe.svg file code

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="101.54 -854.71 787 647.47">
  <path d="M 101.543 -207.24 L 101.543 -287.24 L 888.543 -287.24 L 888.543 -207.24 L 101.543 -207.24 Z"/>
  <path d="M 480.431 -327.22 L 292.045 -515.61 L 344.791 -568.35 L 442.753 -470.39 L 442.753 -854.71 L 518.109 -854.71 L 518.109 -470.39 L 616.069 -568.35 L 668.826 -515.61 L 480.431 -327.22 Z" style="stroke-width: 1;"/>
</svg>

this is vue file code linked to the photo below showing the problem

<template>
  <q-icon name="add" color="black" />
  <q-icon name="add" color="white" class="bg-black" />
  <q-icon name="punktowe" color="black" />
  <q-icon name="punktowe" color="white" class="bg-black" />
</template>

<script setup>
import { useQuasar } from 'quasar'

const myIcons = {
  ciągłe: 'img:src/icons/ciagle.svg',
  punktowe: 'img:/src/icons/punktowe.svg',
  moment: 'img:/src/icons/moment.svg',
}

const $q = useQuasar()

$q.iconMapFn = (iconName) => {
  const icon = myIcons[iconName]
  if (icon !== undefined) {
    return { icon }
  }
}
</script>

How do I fix this or how to import icon in such a way that the color will work properly?