MI Guide
  • Gitlab
  • Server Requirement
  • Laragon 6
  • Style Guide
    • Html Style Guide
    • CSS Style Guide
      • Sass Rules
      • Typograph Styling
    • JS Style Guide
    • Elementor Style Guide
      • Rules
      • Algemene and Privacy Template
      • Custom Elementor Widget
    • Responsive and space Guide
  • Setup Project
    • Add a reCAPTCHA to a WordPress website (for dummies)
    • Elementor
    • Tutorial how to change theme name
    • Setup SMTP
  • Project Deployment v1.2.1
    • Deployment Checklist
    • #Project Repository v22.0
    • #Local Environment v22.0
    • #Staging Environment v22.0
    • #Deployment via Git
  • Cache
    • Nitropack - Delete footer banner
    • Wordpress Cache
  • SEO
  • Plugins
    • Sendcloud
    • WooCommerce
      • WooCommerce Loop
      • Vat/Tax deduction for valid tax number
      • Setup Mollie
      • Add Wishlist counter [yith] JS
  • Reference articles, links or others that help in developing
  • Elementor
    • Tutorial to make custom elementor widget in our theme
    • How to add custom font
    • Algemen common case
    • How to regenerate css
  • Divi
    • Add Slick slider to Divi
    • How to use dynamic condition on DIVI
    • How to embed Google Maps on Divi
    • References to help in the development (DIVI)
    • How to enable classic editor on divi
    • How to add custom font
    • Custom divi menu/hamburger breakpoint
    • Divi custom container width
    • Allow SVG upload without plugin
    • Divi font weight cannot set to 400
    • How to regenerate css
  • Optimize Image
  • Common Issue
    • Woocommerce thumbnail blurry
    • FAQ link Height
    • Jquery
    • Custom Checkbox
    • Svg Tips
    • Webp Converter Plugin - Server Konfiguration Error
  • Plugin list
  • Frontend things
    • Frontend Guide
    • MJML
  • Backend things
    • πŸ‘ΊCustom Template Mail
    • πŸ¦„Fun Function
    • 🦽OOP
    • πŸ—‘οΈWoocommerce
    • 🚨Woocommerce Templating Override
    • πŸš€Gravity Form Hook
    • β›ˆοΈFREQUENT ISSUES
    • 😱HOOK
    • πŸ†Page Speed for Backend
    • 🀝Sharing Databases
    • πŸ™‰JS for Backend Purposes
      • πŸ’ΈPenamaan folder, penulisan kode dan pengetahuan dasar
      • πŸƒβ€β™‚οΈAjax request on wordpress
      • πŸ₯·Woocommerce JS Event
    • πŸ¦Έβ€β™‚οΈHELPERS
Powered by GitBook
On this page
  1. Common Issue

Svg Tips

Dynamic color svg

we can make the color of the svg to be dynamic (follow the color of the parent) by changing the color value to currentColor

<!-- Bad -->
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3761 16.6715C16.8368 16.5755 17.1111 16.0934 16.8822 15.6823C16.3776 14.7759 15.5826 13.9794 14.5655 13.3724C13.2557 12.5907 11.6508 12.167 9.99982 12.167C8.34881 12.167 6.74394 12.5907 5.43411 13.3724C4.41708 13.9794 3.62206 14.7759 3.1174 15.6823C2.88849 16.0934 3.16285 16.5755 3.62353 16.6715C7.8292 17.548 12.1704 17.548 16.3761 16.6715Z" fill="white"/>
<ellipse cx="10.0002" cy="7.16667" rx="4.16667" ry="4.16667" fill="white"/>
</svg>

<!-- Good -->
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3761 16.6715C16.8368 16.5755 17.1111 16.0934 16.8822 15.6823C16.3776 14.7759 15.5826 13.9794 14.5655 13.3724C13.2557 12.5907 11.6508 12.167 9.99982 12.167C8.34881 12.167 6.74394 12.5907 5.43411 13.3724C4.41708 13.9794 3.62206 14.7759 3.1174 15.6823C2.88849 16.0934 3.16285 16.5755 3.62353 16.6715C7.8292 17.548 12.1704 17.548 16.3761 16.6715Z" fill="currentColor"/>
<ellipse cx="10.0002" cy="7.16667" rx="4.16667" ry="4.16667" fill="currentColor"/>
</svg>

PreviousCustom CheckboxNextWebp Converter Plugin - Server Konfiguration Error

Last updated 2 years ago