search

jacobmischka / gatsby-plugin-react-svg

Adds svg-react-loader to gatsby webpack config
https://www.npmjs.com/package/gatsby-plugin-react-svg
MIT License
69 stars 21 forks source link

Multiple same svg only render single svg #41

Open mustofa-binary opened 4 years ago

mustofa-binary commented 4 years ago

lets say i have one svg which has linearGradient with id, and i wanted to try render the same svg on multiple places within the same page. only the first one got render because the id is conflicting. is there a way to get a workaround on this, or can we modify the id on specific path?

svg example

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <defs>
        <linearGradient id="94h1ukeypa" x1="0%" x2="100%" y1="95.92%" y2="4.08%">
            <stop offset="0%" stop-color="#FF444F"/>
            <stop offset="100%" stop-color="#FF6444"/>
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <path d="M0 0H18V18H0z" transform="translate(3 3)"/>
        <path fill="url(#94h1ukeypa)" fill-rule="nonzero" d="M9 0c1.243 0 2.25 1.175 2.25 2.625 0 .834-.334 1.578-.854 2.058.974.348 1.737 1.17 2.038 2.196.28-.563.718-1.02 1.25-1.306-.567-.408-.934-1.072-.934-1.823 0-1.243 1.007-2.25 2.25-2.25s2.25 1.007 2.25 2.25c0 .765-.381 1.44-.965 1.847.876.486 1.49 1.444 1.545 2.568l.167 2.716c.019.23-.055.46-.203.628-.147.17-.355.263-.564.259l-.594-.001-.42 4.875c-.03.318-.26.565-.547.603l-.08.005h-1.22c-.33.001-.604-.271-.629-.624l-.338-4.693h-.633c-.179 0-.35-.067-.488-.187l.028.02c-.068.025-.14.04-.215.04h-.84c-.043 0-.08.034-.084.076l-.465 4.617c-.033.426-.374.752-.78.751H8.726c-.412 0-.754-.334-.781-.756l-.366-4.416c-.005-.05-.043-.087-.086-.087h-.705c-.213 0-.418-.09-.567-.251-.148-.16-.229-.377-.222-.603l.12-3.264c0-1.299.703-2.427 1.733-2.99-.66-.457-1.103-1.297-1.103-2.258C6.75 1.175 7.757 0 9 0zM3 1.5c1.243 0 2.25 1.007 2.25 2.25 0 .759-.376 1.43-.951 1.838.926.502 1.56 1.52 1.56 2.682l.14 2.702c.01.223-.066.441-.212.603-.146.162-.349.254-.56.253h-.584l-.423 4.821c-.03.314-.262.559-.55.596l-.08.005H2.376c-.332.001-.608-.268-.633-.617l-.34-4.641H.76c-.177-.003-.348-.07-.483-.19l-.064-.064c-.143-.158-.22-.37-.213-.59L.1 8.29c0-1.188.645-2.217 1.586-2.718C1.118 5.167.75 4.501.75 3.75.75 2.507 1.757 1.5 3 1.5zm6.347 3.737c-1.393 0-2.523 1.18-2.523 2.65l-.12 3.276c0 .024.008.047.024.064.016.018.038.027.061.027h.709c.407.005.745.33.784.757l.366 4.427c.003.042.037.075.079.075h1.199c.04 0 .074-.032.078-.082l.465-4.629c.046-.419.386-.735.787-.732H12l.016-.474-.147-2.723c0-1.35-.971-2.464-2.223-2.618L9.48 5.24zm-6.481.76H2.83C1.696 6.077.8 7.074.8 8.304l-.098 2.87c0 .02.007.039.02.053.013.014.03.023.044.023h.701c.332-.001.608.268.633.617l.339 4.641h1.088l.423-4.812c.029-.312.256-.558.55-.602l.08-.007h.647c.02 0 .038-.008.051-.023.013-.015.02-.035.02-.053l-.142-2.72c0-1.27-.975-2.3-2.177-2.3l.126.005L3 6c-.045 0-.09-.001-.134-.004zM14.964 6c-1.155 0-2.107.971-2.168 2.204l-.078 2.311.031.568c.002.032.001.063-.002.095l.021.005h.698c.33-.001.603.271.628.623l.337 4.694h1.096l.42-4.866c.029-.316.255-.565.546-.61l.081-.006h.664c.017 0 .035-.008.047-.022.012-.014.018-.033.016-.059l-.168-2.727C17.073 6.97 16.12 6 14.964 6zm-5.589-.75c.207 0 .375.168.375.375v2.25c0 .207-.168.375-.375.375S9 8.082 9 7.875v-2.25c0-.207.168-.375.375-.375zM15 2.248c-.83 0-1.502.672-1.502 1.502S14.17 5.252 15 5.252l-.042-.002h.056c.823-.005 1.488-.675 1.488-1.5 0-.83-.672-1.502-1.502-1.502zm-12 0c-.83 0-1.502.672-1.502 1.502S2.17 5.252 3 5.252l-.036-.002h.055c.82-.007 1.483-.676 1.483-1.5 0-.83-.672-1.502-1.502-1.502zM9 .784c-.872 0-1.578.824-1.578 1.841S8.128 4.466 9 4.466c.872 0 1.578-.824 1.578-1.841S9.872.784 9 .784z" transform="translate(3 3)"/>
    </g>
</svg>
0xferit commented 3 years ago

I experience the same. Variable identifiers are clashing and causing problems visually.

cwagner22 commented 2 years ago

Did you find a solution?

jacobmischka commented 2 years ago

You probably want to use the classIdPrefix option to svg-react-loader, as specified in the README, specifying a different prefix for each import via the import-level configuration.

jacobmischka commented 2 years ago

As mentioned in #40 (and https://github.com/jhamlet/svg-react-loader/issues/94), it looks like special [hash] (etc) names don't work upstream, but manually creating a different prefix string should work. If you have to do that dynamically (like in a loop that renders an undetermined number of SVGs), you'll likely have to use dynamic import().