Changing PhotoSwipe's Default UI Icons

[anipalur]

I would like to change the default PhotoSwipe UI icons (zoom, maximise, close, etc.) when viewing images to use Tabler Icons instead. As of now, the icons don't match the rest of the site.

I understand that PhotoSwipe JS and CSS are sourced from a CDN here:

hugo-theme-stack/data/external.yaml

Lines 6 to 21 in ce0a252

	PhotoSwipe:
	- src: https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.min.js
	integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=
	type: script
	defer: true
	- src: https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe-ui-default.min.js
	integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=
	type: script
	defer: true
	- src: https://cdn.jsdelivr.net/npm/[email protected]/dist/default-skin/default-skin.min.css
	type: style
	- src: https://cdn.jsdelivr.net/npm/[email protected]/dist/photoswipe.min.css
	type: style

However, I couldn't find a way to change the icons from here. I read PhotoSwipe's documentation on this too but didn't know where to add the JS. Any help would be appreciated.

P.S. It would be great if PhotoSwipe UI icons were sourced from assets/icons like other icons so users could easily change them.

[Lovirr]

here is the source code of PhotoSwipe:https://github.com/dimsemenov/PhotoSwipe/archive/refs/tags/v4.1.3.zip

we can define our icons by downloading the files from the CDN and modifying them. Upon my examination, the original SVG icons are not separate; instead, four icons are combined into one image, and a specific icon is displayed by shifting it left or right. The exact location is at:

https://cdn.jsdelivr.net/npm/[email protected]/dist/default-skin/default-skin.svg

However, it appears white and is not visible against a white background. If you want to preview it, please visit:
https://cdn.jsdelivr.net/npm/[email protected]/dist/default-skin/default-skin.png

If you wish to modify the icons, you need to search for the URL in the default-skin.min.css file:
https://cdn.jsdelivr.net/npm/[email protected]/dist/default-skin/default-skin.min.css

Then, choose your favourite icon to replace the origin one, and adjust the spacing between the icons to display the desired one.

Overall, this is a rather cumbersome method.