Would it be possible to distribute a separate swiper.fonts.css or something alike that one could use if you were to use the buttons from the package?

I agree that it's not ideal to force include the font like this so it could be changed to loading two separate stylesheets; one for the general style of the swiper component and one for the fonts in case they'd be used.

I would be down to work on this if that's something you'd accept (although I may need some guidance on where to get started modifying the build; I haven't looked at it in depth yet)!

Any progress on this? Using font-src: data: isn't the way to go.

I would like to know whether this issue has any progress. As you can read here

data: Allows data: URLs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URLs. Use this sparingly and definitely not for scripts.

data sources are not recommended.

up

Please change the prev/next icons from the 'swiper-icons' font to inline svg background-images so there is no more need for loading the font in the first place.

Manually importing and modifying the swiper-bundle.css is very suboptimal when trying to keep swiper.js up-to-date and working in multiple projects. This costs so much time and it ruins the benefits of just loading the latest version via npm.

as a workaround, I use a webpack loader to extract the data url from swiper.css, convert it to a font file, and replace that data url with the font file's path

{
  test: /swiper.css$/,
  loader: "string-replace-loader",
  options: {
    search: /'data:application\/font-woff;charset=utf-8;base64, ([\s\S]*?)'/,
    replace(_match: string, base64Str: string) {
      fs.createWriteStream("src/styles/fonts/swiper-icons.woff").write(
        base64.toByteArray(base64Str)
      );
      return `src/styles/fonts/swiper-icons.woff`;
    },
  },
}