fix: violates the following Content Security Policy directive: font-src

[sadeghbarati]

Fixes #4990

Idea: https://antfu.me/posts/icons-in-pure-css

Add two CSS variable to manage default icons in Swiper Navigation Used default icons in icons/svg

:root {
  --swiper-navigation-prev-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10.4772727,0.477272727 C10.7408632,0.740863176 10.7408632,1.16822773 10.4772727,1.43181818 L1.90909091,10 L10.4772727,18.5681818 C10.7408632,18.8317723 10.7408632,19.2591368 10.4772727,19.5227273 C10.2136823,19.7863177 9.78631772,19.7863177 9.52272727,19.5227273 L0.707106781,10.7071068 C0.316582489,10.3165825 0.316582489,9.68341751 0.707106781,9.29289322 L9.52272727,0.477272727 C9.78631772,0.213682278 10.2136823,0.213682278 10.4772727,0.477272727 Z' transform='translate(4)'/%3E%3C/svg%3E");
  --swiper-navigation-next-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M1.37727273,19.5227273 C1.11368228,19.2591368 1.11368228,18.8317723 1.37727273,18.5681818 L9.94545455,10 L1.37727273,1.43181818 C1.11368228,1.16822773 1.11368228,0.740863176 1.37727273,0.477272727 C1.64086318,0.213682278 2.06822773,0.213682278 2.33181818,0.477272727 L11.1474387,9.29289322 C11.537963,9.68341751 11.537963,10.3165825 11.1474387,10.7071068 L2.33181818,19.5227273 C2.06822773,19.7863177 1.64086318,19.7863177 1.37727273,19.5227273 Z' transform='translate(4)'/%3E%3C/svg%3E");
}

[hughsie]

This would also allow me to migrate the LVFS from Owl to Swiper.

[kevin-appelt]

Would be great to see this merged as it avoids a lot of CSP violation reports.

[EliezerB123]

@sadeghbarati I'm not a maintainer, but could you please scope the CSS to not use :root? :root is a little too global, and the CSS will show up when inspecting using Chrome's Dev tools on ANY element on the page, even those completely unrelated to Swiper.

[sadeghbarati]

CodeSandbox Playground

[nrvikas]

Hi @nolimits4web - can this be reviewed and merged as it is violating font-src CSP directive in our application. Thanks.