How to change SVG path fill in react?-CodePudding

import { ReactComponent as Group303 } from '/src/assets/svg/Group_303.svg';
export default {
  Group303,
  };

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="475" fill="none"><path fill="#584DFC" d="M282.073 17.905c-25.329-10.3-52.088-18.894-79.4-17.813-40.165 1.58-78.686 25.743-97.6 61.215-16.026 30.053-18 65.277-24.9 98.628-8.516 41.1-24.8 80.137-42.2 118.327-9.343 20.514-19.2 41.471-20.732 63.961-2.132 31.214 12.791 62.324 36.2 83.091 23.41 20.767 54.484 31.725 85.679 34.115 16.6 1.27 33.948.092 48.7-7.637 15.595-8.171 26.972-22.945 42.63-31 14.514-7.47 31.494-8.522 47.79-7.545a214.116 214.116 0 0 1 62.391 13.262c22.777 8.556 43.957 20.939 66.683 29.616 22.726 8.677 48.117 13.509 71.349 6.275 21.8-6.8 39.073-23.307 54.587-40.028a700.342 700.342 0 0 0 69.625-88.09c14.026-21.008 27.081-43.177 33.287-67.668 11.854-46.82-4.465-99.646-40.659-131.589-29.971-26.507-70.217-38-109.612-45-35.924-6.361-77.462-6.758-110.531-23.341-31.54-15.813-60.235-35.334-93.287-48.779Z" opacity=".1"/><path fill="#464A5F" d="m536.695 331.506.96.965.431-1.661-.46-1.638h-1.184l.253 2.334Z"/><path fill="#000" d="m536.695 331.506.96.965.431-1.661-.46-1.638h-1.184l.253 2.334Z" opacity=".1"/><path fill="#9C9CA1" d="m536.695 331.506.931.994-.931 1.092-1-.373-.247-.483 1.247-1.23Z"/><path fill="#000" d="m536.695 331.506.931.994-.931 1.092-1-.373-.247-.483 1.247-1.23Z" opacity=".1"/><path fill="#9C9CA1" d="M359.82 156.947 254.733 262.034c-3.934 3.933-3.947 10.307-.029 14.256l161.079 162.361c3.921 3.951 10.299 3.985 14.262.075l106.656-105.128L359.82 156.947Z"/><path fill="#000" d="M359.82 156.947 254.733 262.034c-3.934 3.933-3.947 10.307-.029 14.256l161.079 162.361c3.921 3.951 10.299 3.985 14.262.075l106.656-105.128L359.82 156.947Z" opacity=".1"/><path fill="#9C9CA1" d="M359.82 154.861 254.733 259.948c-3.935 3.933-3.948 10.308-.029 14.257l161.079 162.354c3.92 3.952 10.298 3.988 14.262.08l106.656-105.156L359.82 154.861Z"/><path fill="#464A5F" d="m370.846 80.993-9.642 73.175 176.881 176.643 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L374.455 79.741a2.138 2.138 0 0 0-3.609 1.253v-.001Z"/><path fill="#000" d="m370.846 80.993-9.642 73.175 176.881 176.643 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L374.455 79.741a2.138 2.138 0 0 0-3.609 1.253v-.001Z" opacity=".1"/><path fill="#464A5F" d="m369.456 81.688-9.642 73.173 176.881 176.645 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L373.065 80.436a2.138 2.138 0 0 0-3.609 1.253v-.001Z"/><path fill="#000" d="m342.883 278.031-34.839 34.61a5.172 5.172 0 0 0-.057 7.275l64.438 66.174a5.172 5.172 0 0 0 7.332.081l35.874-35.288a5.17 5.17 0 0 0 .029-7.338l-65.473-65.513a5.173 5.173 0 0 0-7.304-.001Z" opacity=".1"/><path fill="#939498" d="m342.883 276.612-34.839 34.638a5.172 5.172 0 0 0-.057 7.275l64.438 66.174a5.177 5.177 0 0 0 3.649 1.565 5.176 5.176 0 0 0 3.683-1.484l35.873-35.293a5.171 5.171 0 0 0 .029-7.338l-65.473-65.502a5.172 5.172 0 0 0-7.303-.035Z"/><path fill="#584DFC" d="m376.344 94.994-8.82 61.669 163.434 162.908 8.321-61.128a10.801 10.801 0 0 0-3.074-9.1L379.97 93.773a2.139 2.139 0 0 0-3.626 1.217v.004Z"/><path fill="#584DFC" d="M169.561 393.917c7.335 0 13.28-.816 13.28-1.822 0-1.006-5.945-1.822-13.28-1.822-7.334 0-13.28.816-13.28 1.822 0 1.006 5.946 1.822 13.28 1.822Zm-50.876 5.16c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm-59.918-6.982c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm80.282 21.146c5.214 0 9.441-.582 9.441-1.299s-4.227-1.299-9.441-1.299-9.441.582-9.441 1.299 4.227 1.299 9.441 1.299Zm-52.798-1.298c5.214 0 9.441-.581 9.441-1.299 0-.717-4.227-1.299-9.44-1.299-5.215 0-9.442.582-9.442 1.299 0 .718 4.227 1.299 9.441 1.299Z" opacity=".1"/><path fill="#584DFC" d="M118.409 396.847s18.624-61.06-2.919-85.487c-16.09-18.3-34.4-16.089-42.6-13.843a15.136 15.136 0 0 0-9.77 8.114c-2.872 6.183-2.343 16.21 17.872 27.915 33.857 19.6 35.96 46.487 35.96 46.487l1.457 16.814Z"/><path stroke="#2A2E71" d="M75.793 306.148s54.911 17.164 42.6 90.7"/><path stroke="#2A2E71" d="M107.874 312.302s-7.556 5.091-5.172 12.751m-21.387-8.217s4.6-4.7 10.246-2.109m11.458 25.755s8.114-4.12 10.217 1.04m9.866 7.547s-6.1-.483-6.206 2.431"/><path fill="#584DFC" d="M119.16 397.335s-21.836-44.375-27.812-43.407c-2.844.46-4.155 3.258-4.746 6.074a17.9 17.9 0 0 0 1.184 10.8c3.097 7.105 11.412 20.592 31.374 26.533Z"/><path stroke="#2A2E71" d="M91.515 362.346s22.893 33.207 27.318 34.661m-29.427-29.478h5.344m1.057 12.148 8.378.356m-3.281-10.073-.908 4.361m9.821 8.919-.167 3.965"/><path fill="#584DFC" d="M118.506 397.335s21.836-44.378 27.806-43.407c2.873.46 4.16 3.258 4.752 6.074a17.855 17.855 0 0 1-1.19 10.8c-3.091 7.105-11.408 20.592-31.368 26.533Z"/><path stroke="#2A2E71" d="M146.151 362.346s-22.9 33.207-27.323 34.661m29.426-29.478h-5.344m-1.057 12.148-8.378.356m3.281-10.073.908 4.361m-9.814 8.919.161 3.965"/><path fill="#584DFC" d="m376.344 94.994-8.82 61.669 163.434 162.908 8.321-61.128a10.801 10.801 0 0 0-3.074-9.1L379.97 93.773a2.139 2.139 0 0 0-3.626 1.217v.004Z"/><path fill="#584DFC" d="M169.561 393.917c7.335 0 13.28-.816 13.28-1.822 0-1.006-5.945-1.822-13.28-1.822-7.334 0-13.28.816-13.28 1.822 0 1.006 5.946 1.822 13.28 1.822Zm-50.876 5.16c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm-59.918-6.982c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm80.282 21.146c5.214 0 9.441-.582 9.441-1.299s-4.227-1.299-9.441-1.299-9.441.582-9.441 1.299 4.227 1.299 9.441 1.299Zm-52.798-1.298c5.214 0 9.441-.581 9.441-1.299 0-.717-4.227-1.299-9.44-1.299-5.215 0-9.442.582-9.442 1.299 0 .718 4.227 1.299 9.441 1.299Z" opacity=".1"/><path fill="#584DFC" d="M118.409 396.847s18.624-61.06-2.919-85.487c-16.09-18.3-34.4-16.089-42.6-13.843a15.136 15.136 0 0 0-9.77 8.114c-2.872 6.183-2.343 16.21 17.872 27.915 33.857 19.6 35.96 46.487 35.96 46.487l1.457 16.814Z"/><path stroke="#2A2E71" d="M75.793 306.148s54.911 17.164 42.6 90.7"/><path stroke="#2A2E71" d="M107.874 312.302s-7.556 5.091-5.172 12.751m-21.387-8.217s4.6-4.7 10.246-2.109m11.458 25.755s8.114-4.12 10.217 1.04m9.866 7.547s-6.1-.483-6.206 2.431"/><path fill="#584DFC" d="M119.16 397.335s-21.836-44.375-27.812-43.407c-2.844.46-4.155 3.258-4.746 6.074a17.9 17.9 0 0 0 1.184 10.8c3.097 7.105 11.412 20.592 31.374 26.533Z"/><path stroke="#2A2E71" d="M91.515 362.346s22.893 33.207 27.318 34.661m-29.427-29.478h5.344m1.057 12.148 8.378.356m-3.281-10.073-.908 4.361m9.821 8.919-.167 3.965"/>

I have a page with 4 SVG files from Figma. All images have same main colors. SVG files have a lot of paths. Ones have same fill color, others different. How can I change these fill colors? without changing my SVG? Is it possible to group paths with the same color?

my js file to import svg file

my svg

CodePudding user response：

Yes you can do with CSS, you can simply set the CSS id selector to the particular SVG. After that you can add the CSS "fill" property, which will change your SVG Color.

CodePudding user response：

Provided, your svg graphics will be rendered as inlined DOM elements, you can use attribute selectors to change color schemes:

The original fill attribute values will be used as css selectors like so:

path[fill="#584DFC"] {
  fill: red;
}

path[fill="#9C9CA1"] {
  fill: orange;
}

path[fill="#939498"] {
  fill: magenta;
}

path[fill="#464A5F"] {
  fill: purple;
}

path[stroke="#2A2E71"] {
  stroke: cyan;
  stroke-width:3px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="475" fill="none">
  <path fill="#584DFC" d="M282.073 17.905c-25.329-10.3-52.088-18.894-79.4-17.813-40.165 1.58-78.686 25.743-97.6 61.215-16.026 30.053-18 65.277-24.9 98.628-8.516 41.1-24.8 80.137-42.2 118.327-9.343 20.514-19.2 41.471-20.732 63.961-2.132 31.214 12.791 62.324 36.2 83.091 23.41 20.767 54.484 31.725 85.679 34.115 16.6 1.27 33.948.092 48.7-7.637 15.595-8.171 26.972-22.945 42.63-31 14.514-7.47 31.494-8.522 47.79-7.545a214.116 214.116 0 0 1 62.391 13.262c22.777 8.556 43.957 20.939 66.683 29.616 22.726 8.677 48.117 13.509 71.349 6.275 21.8-6.8 39.073-23.307 54.587-40.028a700.342 700.342 0 0 0 69.625-88.09c14.026-21.008 27.081-43.177 33.287-67.668 11.854-46.82-4.465-99.646-40.659-131.589-29.971-26.507-70.217-38-109.612-45-35.924-6.361-77.462-6.758-110.531-23.341-31.54-15.813-60.235-35.334-93.287-48.779Z" opacity=".1" />
  <path fill="#464A5F" d="m536.695 331.506.96.965.431-1.661-.46-1.638h-1.184l.253 2.334Z" />
  <path fill="#000" d="m536.695 331.506.96.965.431-1.661-.46-1.638h-1.184l.253 2.334Z" opacity=".1" />
  <path fill="#9C9CA1" d="m536.695 331.506.931.994-.931 1.092-1-.373-.247-.483 1.247-1.23Z" />
  <path fill="#000" d="m536.695 331.506.931.994-.931 1.092-1-.373-.247-.483 1.247-1.23Z" opacity=".1" />
  <path fill="#9C9CA1" d="M359.82 156.947 254.733 262.034c-3.934 3.933-3.947 10.307-.029 14.256l161.079 162.361c3.921 3.951 10.299 3.985 14.262.075l106.656-105.128L359.82 156.947Z" />
  <path fill="#000" d="M359.82 156.947 254.733 262.034c-3.934 3.933-3.947 10.307-.029 14.256l161.079 162.361c3.921 3.951 10.299 3.985 14.262.075l106.656-105.128L359.82 156.947Z" opacity=".1" />
  <path fill="#9C9CA1" d="M359.82 154.861 254.733 259.948c-3.935 3.933-3.948 10.308-.029 14.257l161.079 162.354c3.92 3.952 10.298 3.988 14.262.08l106.656-105.156L359.82 154.861Z" />
  <path fill="#464A5F" d="m370.846 80.993-9.642 73.175 176.881 176.643 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L374.455 79.741a2.138 2.138 0 0 0-3.609 1.253v-.001Z" />
  <path fill="#000" d="m370.846 80.993-9.642 73.175 176.881 176.643 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L374.455 79.741a2.138 2.138 0 0 0-3.609 1.253v-.001Z" opacity=".1" />
  <path fill="#464A5F" d="m369.456 81.688-9.642 73.173 176.881 176.645 10.159-74.379a10.756 10.756 0 0 0-3.126-9.154L373.065 80.436a2.138 2.138 0 0 0-3.609 1.253v-.001Z" />
  <path fill="#000" d="m342.883 278.031-34.839 34.61a5.172 5.172 0 0 0-.057 7.275l64.438 66.174a5.172 5.172 0 0 0 7.332.081l35.874-35.288a5.17 5.17 0 0 0 .029-7.338l-65.473-65.513a5.173 5.173 0 0 0-7.304-.001Z" opacity=".1" />
  <path fill="#939498" d="m342.883 276.612-34.839 34.638a5.172 5.172 0 0 0-.057 7.275l64.438 66.174a5.177 5.177 0 0 0 3.649 1.565 5.176 5.176 0 0 0 3.683-1.484l35.873-35.293a5.171 5.171 0 0 0 .029-7.338l-65.473-65.502a5.172 5.172 0 0 0-7.303-.035Z" />
  <path fill="#584DFC" d="m376.344 94.994-8.82 61.669 163.434 162.908 8.321-61.128a10.801 10.801 0 0 0-3.074-9.1L379.97 93.773a2.139 2.139 0 0 0-3.626 1.217v.004Z" />
  <path fill="#584DFC" d="M169.561 393.917c7.335 0 13.28-.816 13.28-1.822 0-1.006-5.945-1.822-13.28-1.822-7.334 0-13.28.816-13.28 1.822 0 1.006 5.946 1.822 13.28 1.822Zm-50.876 5.16c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm-59.918-6.982c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm80.282 21.146c5.214 0 9.441-.582 9.441-1.299s-4.227-1.299-9.441-1.299-9.441.582-9.441 1.299 4.227 1.299 9.441 1.299Zm-52.798-1.298c5.214 0 9.441-.581 9.441-1.299 0-.717-4.227-1.299-9.44-1.299-5.215 0-9.442.582-9.442 1.299 0 .718 4.227 1.299 9.441 1.299Z" opacity=".1" />
  <path fill="#584DFC" d="M118.409 396.847s18.624-61.06-2.919-85.487c-16.09-18.3-34.4-16.089-42.6-13.843a15.136 15.136 0 0 0-9.77 8.114c-2.872 6.183-2.343 16.21 17.872 27.915 33.857 19.6 35.96 46.487 35.96 46.487l1.457 16.814Z" />
  <path stroke="#2A2E71" d="M75.793 306.148s54.911 17.164 42.6 90.7" />
  <path stroke="#2A2E71" d="M107.874 312.302s-7.556 5.091-5.172 12.751m-21.387-8.217s4.6-4.7 10.246-2.109m11.458 25.755s8.114-4.12 10.217 1.04m9.866 7.547s-6.1-.483-6.206 2.431" />
  <path fill="#584DFC" d="M119.16 397.335s-21.836-44.375-27.812-43.407c-2.844.46-4.155 3.258-4.746 6.074a17.9 17.9 0 0 0 1.184 10.8c3.097 7.105 11.412 20.592 31.374 26.533Z" />
  <path stroke="#2A2E71" d="M91.515 362.346s22.893 33.207 27.318 34.661m-29.427-29.478h5.344m1.057 12.148 8.378.356m-3.281-10.073-.908 4.361m9.821 8.919-.167 3.965" />
  <path fill="#584DFC" d="M118.506 397.335s21.836-44.378 27.806-43.407c2.873.46 4.16 3.258 4.752 6.074a17.855 17.855 0 0 1-1.19 10.8c-3.091 7.105-11.408 20.592-31.368 26.533Z" />
  <path stroke="#2A2E71" d="M146.151 362.346s-22.9 33.207-27.323 34.661m29.426-29.478h-5.344m-1.057 12.148-8.378.356m3.281-10.073.908 4.361m-9.814 8.919.161 3.965" />
  <path fill="#584DFC" d="m376.344 94.994-8.82 61.669 163.434 162.908 8.321-61.128a10.801 10.801 0 0 0-3.074-9.1L379.97 93.773a2.139 2.139 0 0 0-3.626 1.217v.004Z" />
  <path fill="#584DFC" d="M169.561 393.917c7.335 0 13.28-.816 13.28-1.822 0-1.006-5.945-1.822-13.28-1.822-7.334 0-13.28.816-13.28 1.822 0 1.006 5.946 1.822 13.28 1.822Zm-50.876 5.16c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm-59.918-6.982c7.334 0 13.28-.816 13.28-1.822 0-1.006-5.946-1.822-13.28-1.822-7.335 0-13.28.816-13.28 1.822 0 1.006 5.945 1.822 13.28 1.822Zm80.282 21.146c5.214 0 9.441-.582 9.441-1.299s-4.227-1.299-9.441-1.299-9.441.582-9.441 1.299 4.227 1.299 9.441 1.299Zm-52.798-1.298c5.214 0 9.441-.581 9.441-1.299 0-.717-4.227-1.299-9.44-1.299-5.215 0-9.442.582-9.442 1.299 0 .718 4.227 1.299 9.441 1.299Z" opacity=".1" />
  <path fill="#584DFC" d="M118.409 396.847s18.624-61.06-2.919-85.487c-16.09-18.3-34.4-16.089-42.6-13.843a15.136 15.136 0 0 0-9.77 8.114c-2.872 6.183-2.343 16.21 17.872 27.915 33.857 19.6 35.96 46.487 35.96 46.487l1.457 16.814Z" />
  <path stroke="#2A2E71" d="M75.793 306.148s54.911 17.164 42.6 90.7" />
  <path stroke="#2A2E71" d="M107.874 312.302s-7.556 5.091-5.172 12.751m-21.387-8.217s4.6-4.7 10.246-2.109m11.458 25.755s8.114-4.12 10.217 1.04m9.866 7.547s-6.1-.483-6.206 2.431" />
  <path fill="#584DFC" d="M119.16 397.335s-21.836-44.375-27.812-43.407c-2.844.46-4.155 3.258-4.746 6.074a17.9 17.9 0 0 0 1.184 10.8c3.097 7.105 11.412 20.592 31.374 26.533Z" />
  <path stroke="#2A2E71" d="M91.515 362.346s22.893 33.207 27.318 34.661m-29.427-29.478h5.344m1.057 12.148 8.378.356m-3.281-10.073-.908 4.361m9.821 8.919-.167 3.965" />
</svg>

This approach would also work for stroke colors.