Closed marekdedic closed 7 months ago
To clarify, the usual way around this is to use class:some={true}
to dynamically style elements - the classes aren't inline
We support inline style to meet the following use cases:
<FaLayers size="4x" style="background: mistyrose">
<Fa icon={faEnvelope} />
<FaLayersText scale={0.2} translateX={0.4} translateY={-0.4} color="white" style="padding: 0 .2em; background: tomato; border-radius: 1em">
1,419
</FaLayersText>
</FaLayers>
Hmm, yeah, if values are passed to the component directly, that's unfortunately a little bit complicated - I see only one option that doesn't violate the CSP - add them with a JS function (see https://stackoverflow.com/a/57633533)
Would you be willing to accept a PR?
@marekdedic Yes, please feel free to submit a PR!
@marekdedic Please see https://github.com/Cweili/svelte-fa/pull/308#issuecomment-1862212759
Released with v4. Thanks!
Hi, I would like to use CSP for my site, however, svelte-fa contains inline styles that prevent me from removing
unsafe-inline
from mystyle-src
. Could you please remove inline styles?A quick search through the code reveals several candidates for the offending lines:
https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa.svelte#L72
https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa-layers.svelte#L50
https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa-layers-text.svelte#L39
Thanks!