أرغب في عرض بعض الأيقونات المخصصة في سمة لا تحتوي على أيقونات افتراضية. بشكل عام، يعمل الأمر بشكل جيد، لكنني غير قادر على استخدام currentColor لملء الأيقونة.
لذا، هذا يعمل:
&::before {content: svg-uri('<svg fill="red" ...
لكن هذا لا يعمل، حيث يعود الافتراضي إلى اللون الأسود:
&::before {content: svg-uri('<svg fill="currentColor" ...
هل قام أي شخص بذلك من قبل؟ لست متأكدًا مما أفتقده..
بقدر ما أعرف، لن يعمل currentColor مع ملفات SVG المضمنة عبر CSS، للأسف يجب ترميز الألوان بشكل ثابت داخل ملف SVG. إحدى الحلول البديلة التي استخدمتها سابقًا لتغيير الألوان هي مرشحات CSS، لكنها أيضًا لها عيوب.
أهلاً، شكراً لك @awesomerobot! يبدو أن هذا هو النهج الوحيد الذي يدعم أيضاً مخططات ألوان مختلفة، وهو وضع الأيقونات في ترميز الصفحة؟
نعم، للأسف! أتمنى وجود طريقة أفضل باستخدام CSS، حيث يمكن أن تكون أسهل لإضافة أيقونة زخرفية في بعض الأماكن.