+++ b/core/themes/claro/css/dist/components/action-link.css
@@ -0,0 +1,276 @@
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='16px' viewBox='0 0 14 16'%3E%3Cpath fill='%23545560' d='M13.9,2.9c-0.1-0.4-0.2-0.6-0.2-0.6c-0.1-0.4-0.4-0.4-0.8-0.5l-2.3-0.3c-0.3,0-0.3,0-0.4-0.3 C9.8,0.5,9.7,0,9.3,0H4.7C4.3,0,4.2,0.5,3.8,1.3C3.7,1.5,3.7,1.5,3.4,1.6L1.1,1.9C0.7,1.9,0.4,2,0.3,2.3c0,0-0.1,0.2-0.2,0.5 C0,3.4-0.1,3.3,0.4,3.3h13.2C14.1,3.3,14,3.4,13.9,2.9z M12.4,4.7H1.6c-0.7,0-0.8,0.1-0.7,0.6l0.8,10.1C1.8,15.9,1.8,16,2.5,16h9.1 c0.6,0,0.7-0.1,0.8-0.6l0.8-10.1C13.2,4.8,13.1,4.7,12.4,4.7z'/%3E%3C/svg%3E");
🤓 Have these SVGs been optimized?
🤔🤔🤔 More importantly: why are these inlined already? (These were done in #3036732: Action link component.) I'm sure that the build tools (#3060153: Use PostCSS in core, initially only for Claro) allow this to happen at build time? That'd make it much easier to inspect the SVGs, to apply SVG optimization tools, to encourage reuse, etc. It also allows us to decide whether we truly want to inline these as data:
URIs, or whether it makes more sense to let them be loaded by HTTP requests. This particular CSS file is 24 KB ungzipped and unminified. That's … a lot. Most of that is due to these inlined SVG files (this CSS file is the single largest CSS file in Claro).
In other words: for developer ergonomics and for web performance optimization reasons I think we should consider changing this.
In #3083657: Devise strategy to address several SVG loading+usage issues, it was agreed this was a sound approach.