parcel/svgo optimiser not working consistently for all packages

[Sidra Iqbal]

🐛 bug report

• We migrated to using parcel around a 1month ago (previously used babel) and use svgo plugin to optimise svg files, but since migrating we have seen some images cut-off and some completely misplaced from their div, but others were fine which upon inspection is due to the svgProps in the legacy file below
• We are using React and are using an svg transformer to transform svg to jsx

We have this legacy file which was used to optimise svg files prior to using parcel. The ideal would be to remove this, but the svgProps is causing the biggest issue.

• When svgProps remains as is, some svg images are fine and others are slightly cut off
• When svgProps is removed, the original cut-off svg images are now fine, but the some other images are misplaced from their div and enlarged

  titleProp: true,
  memo: true,
  svgProps: {
    width: '1.6rem',
    height: '1.6rem',
  },
  dimensions: true,
  expandProps: 'end',
  svgo: true,
};

🎛 Configuration (.babelrc, package.json, cli command)

{
 "devDependencies": {
    "@faker-js/faker": "^8.0.2",
    "@parcel/packager-raw-url": "^2.12.0",
    "@parcel/transformer-sass": "^2.12.0",
    "@parcel/transformer-svg-react": "^2.12.0",
    "@parcel/transformer-webmanifest": "^2.12.0",
    "@testing-library/react": "^9.5.0",
    "@types/classnames": "^2.2.10",
    "@types/enzyme": "^3.10.12",
    "@types/jest": "^25.2.3",
    "@types/lodash": "^4.14.157",
    "@types/node": "^13.13.14",
    "@types/papaparse": "^5.0.4",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/recharts": "^1.8.24",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "autoprefixer": "^10.4.17",
    "buffer": "^6.0.3",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.33.0",
    "husky": "^9.0.11",
    "jest": "^29.0.0",
    "lint-staged": "^15.2.2",
    "parcel": "^2.12.0",
    "prettier": "^3.0.0",
    "sass": "^1.26.10",
    "ts-jest": "^29.1.2",
    "typescript": ">=4.3.0"
  },
  "dependencies": {
    "@auth0/auth0-spa-js": "^1.11.0",
    "@dqna/seamless-suite-ui-kit": "2.40.18",
    "@mui/base": "^5.0.0-alpha.75",
    "@mui/icons-material": "^5.2.4",
    "@mui/lab": "^5.0.0-alpha.107",
    "@mui/material": "^5.14.13",
    "@mui/utils": "^5.2.4",
    "@mui/x-data-grid": "^5.5.1",
    "@mui/x-data-grid-pro": "^5.17.2",
    "@mui/x-date-pickers": "^5.0.0-alpha.5",
    "@reduxjs/toolkit": "^2.2.1",
    "classnames": "^2.2.6",
    "config": "^3.3.9",
    "country-currency-map": "^2.1.7",
    "date-fns": "^2.14.0",
    "dexie": "^3.0.1",
    "formik": "^2.1.4",
    "kalendaryo": "^1.11.1",
    "lodash": "^4.17.19",
    "papaparse": "^5.2.0",
    "query-string": "^6.13.1",
    "rc-tooltip": "^4.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.0",
    "react-dropzone": "^11.2.4",
    "react-redux": "^8.0.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4",
    "react-toastify": "^6.0.8",
    "recharts": "^2.6.2",
    "redux": "^4.0.5",
    "redux-observable": "^1.2.0",
    "rxjs": "^6.6.0"
  },
  "alias": {
    "api": "./src/api/",
    "utils": "./src/utils/",
    "typings": "./src/typings/",
    "store": "./src/store/",
    "components": "./src/components/",
    "icons": "./src/assets/icons",
    "constants": "./src/constants",
    "services": "./src/services/",
    "types": "./src/types/"
  }
}

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "jsx:*.svg": [
      "@parcel/transformer-svg-react"
    ],
    "jsx:*": ["..."]
  }
}

npm commands to start parcel

"start": "npm run clear && npm run onesignal && npm run assets && parcel src/index.html --port 8081"

🤔 Expected Behavior

• Images are not cut off OR largely expanded and misplaced from their div based on the inclusion or exclusion of svgProps

😯 Current Behavior

• When removing the svgProps, some SVG images get massively expanded and misplaced out of their divs, with some showing up right in the centre of the page