outStrokeColor has no effect on the icon

[www-chique]

Setting "outStrokeColor" on the setConfig has no effect on the icon. I am using like this:

import { setConfig } from "@icon-park/svg";

    setConfig({
        theme: "multi-color",
        prefix: "",
        size: "5rem",
        strokeWidth: 4,
        strokeLinecap: "round",
        strokeLinejoin: "round",
        colors: {
            multiColor: {
                outStrokeColor: "#ff0000", // <--- HAS NO EFFECT (doesn't work)
                outFillColor: "#ff00ff",
                innerStrokeColor: "#ff00ff",
                innerFillColor: "#ff00ff",
            },
        },
    });

Upon a little inspection, I found out that the colors are not being set from the config.

switch (theme) {
        case 'outline':
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push('none');
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push('none');
            break;
        case 'filled':
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push('#FFF');
            colors.push('#FFF');
            break;
        case 'two-tone':
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone);
            break;
        case 'multi-color':
            colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor');
            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
            colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
            colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
            break;
    }

Here, in every color case, instead of 'currentColor', it should take the value from config. For example, in "multi-color",

 case 'multi-color':
            colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.multiColor.outStrokeColor);
            colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor);
            colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor);
            colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor);
            break;

[isha-23]

So you figured out the problem right? Well thanks for the information!

On Wed, Sep 29, 2021, 7:08 PM www-chique @.***> wrote:

Setting "outStrokeColor" on the setConfig has no effect on the icon. I am using like this:

import { setConfig } from @.***/svg";

setConfig({ theme: "multi-color", prefix: "", size: "5rem", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round", colors: { multiColor: { outStrokeColor: "#ff0000", // <--- HAS NO EFFECT (doesn't work) outFillColor: "#ff00ff", innerStrokeColor: "#ff00ff", innerFillColor: "#ff00ff", }, }, });

Upon a little inspection, I found out that the colors are not being set from the config https://github.com/bytedance/IconPark/blob/4f8e04052ded9d40b74fc48defb338a48dcab38a/packages/svg/src/runtime/index.tsx#L164 .

switch (theme) { case 'outline': colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push('none'); colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push('none'); break; case 'filled': colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push('#FFF'); colors.push('#FFF'); break; case 'two-tone': colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone); colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.twoTone.twoTone); break; case 'multi-color': colors.push(typeof fill[0] === 'string' ? fill[0] : 'currentColor'); colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor); colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor); colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor); break; }

Here, in every color case, instead of 'currentColor', it should take the value from config. For example, in "multi-color",

case 'multi-color': colors.push(typeof fill[0] === 'string' ? fill[0] : config.colors.multiColor.outStrokeColor); colors.push(typeof fill[1] === 'string' ? fill[1] : config.colors.multiColor.outFillColor); colors.push(typeof fill[2] === 'string' ? fill[2] : config.colors.multiColor.innerStrokeColor); colors.push(typeof fill[3] === 'string' ? fill[3] : config.colors.multiColor.innerFillColor); break;

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bytedance/IconPark/issues/347, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARB7AGHNSHKYRUEUUK7MX43UEMJGNANCNFSM5E75EQNQ .