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.

For example, something like this:

.swiper {
  --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");
}

[sadeghbarati]

CodeSandbox Playground

[nrvikas]

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