False positive on duplication in React/SVG component

Hello,
I am experiencing some false positives with a few icons components. They are created using TSX and not pure svg files (full files source below). In fact, they have a few duplicated lines of code around the function definition. According to Sonar however, they have 88.2% duplication

  • ALM used: GitHub
  • CI system used: GitHub Actions
  • Scanner command used when applicable: SonarSource/sonarcloud-github-action@master
  • Languages of the repository: React/TS

Here are the 2 files:

formula-icon.tsx
import React, { FC } from "react";
import SvgIcon from "@material-ui/core/SvgIcon";
import { DEFAULT_ICON_SIZE, IconProps } from "@spodio-bits/bits.atoms.icons.base";

export type FormulaIconProps = IconProps;

export const FormulaIcon: FC<FormulaIconProps> = React.forwardRef(({ size = DEFAULT_ICON_SIZE, ...props }, ref): JSX.Element => <SvgIcon style={{
  height: size,
  width: size,
}} viewBox="0 0 24 24" fill="none" {...props} ref={ref}>
  <path
    d="M5.43499 9.20344C5.40288 9.20344 5.40288 9.20344 5.43499 9.20344L2.35313 8.94328C2.12841 8.94328 2 8.74816 2 8.55304C2 8.35791 2.19262 8.19531 2.38523 8.19531L5.43499 8.42295C5.6276 8.42295 5.78812 8.61808 5.78812 8.8132C5.78812 9.04084 5.6276 9.20344 5.43499 9.20344Z"
    fill="currentColor"
  />
  <path
    d="M18.9824 13.9837C18.7898 13.9837 18.5972 13.8211 18.5972 13.626C18.5972 13.4309 18.7577 13.2683 18.9824 13.2683H20.6197C20.7802 13.2683 21.0691 13.2033 21.037 12.9106C21.037 12.3252 19.8492 11.0894 16.4784 11.0894H12.6261C11.5025 11.0894 10.6036 10.1789 10.6036 9.04065V8.81301C9.83317 8.97561 8.03542 9.52846 6.84762 11.2846C6.78342 11.3821 6.65501 11.4472 6.5587 11.4472H6.36608C6.33398 11.4472 6.30188 11.4472 6.20557 11.4472H4.50413C4.31151 11.4472 4.1189 11.2846 4.1189 11.0894C4.1189 10.8943 4.27941 10.7317 4.50413 10.7317H6.23767C6.33398 10.7317 6.36608 10.7317 6.39819 10.7317C8.16383 8.22764 10.8605 8 10.9568 8C11.0531 8 11.1494 8.03252 11.2457 8.09756C11.3099 8.1626 11.3741 8.26016 11.3741 8.35772V8.97561C11.3741 9.69106 11.9519 10.2764 12.6582 10.2764H16.5105C20.3307 10.2764 21.7754 11.8049 21.8075 12.8455C21.8396 13.4634 21.358 13.9187 20.6518 13.9512L18.9824 13.9837Z"
    fill="currentColor"
  />
  <path
    d="M13.9745 14.9916H8.90226C8.77385 14.9916 8.64544 14.9266 8.58123 14.7965L8.1639 13.9835H7.81077C7.61815 13.9835 7.49976 13.6951 7.49976 13.5C7.49976 13.3049 7.58605 13.2681 7.81077 13.2681H8.38862C8.51703 13.2681 8.64544 13.3331 8.70964 13.4632L9.12698 14.2762H13.7819L14.4881 13.3981C14.5523 13.3006 14.6486 13.2681 14.7771 13.2681H15.3549C15.5475 13.2681 15.4998 13.3049 15.4998 13.5C15.4998 13.6951 15.5796 13.9835 15.3549 13.9835H14.9697L14.2634 14.8616C14.1671 14.9266 14.0708 14.9916 13.9745 14.9916Z"
    fill="currentColor"
  />
  <path
    d="M21.6149 14.9916H19.8171C19.6245 14.9916 19.4319 14.829 19.4319 14.6338C19.4319 14.4387 19.5924 14.2761 19.8171 14.2761H21.6149C21.8075 14.2761 22.0001 14.4387 22.0001 14.6338C21.968 14.7964 21.8075 14.9916 21.6149 14.9916Z"
    fill="currentColor"
  />
  <path
    d="M20.2024 14.9916C20.0098 14.9916 19.8171 14.829 19.8171 14.6339V13.6258C19.8171 13.4307 19.9777 13.2681 20.2024 13.2681C20.4271 13.2681 20.5876 13.4307 20.5876 13.6258V14.6339C20.5876 14.7965 20.4271 14.9916 20.2024 14.9916Z"
    fill="currentColor"
  />
  <path
    d="M6.01282 16.0002C4.82502 16.0002 3.82983 15.0245 3.82983 13.7888C3.82983 12.5855 4.79291 11.5774 6.01282 11.5774C7.20062 11.5774 8.1958 12.553 8.1958 13.7888C8.1958 14.992 7.23272 16.0002 6.01282 16.0002ZM6.01282 12.3254C5.21025 12.3254 4.5682 12.9758 4.5682 13.7888C4.5682 14.6018 5.21025 15.2522 6.01282 15.2522C6.81538 15.2522 7.45744 14.6018 7.45744 13.7888C7.45744 12.9758 6.81538 12.3254 6.01282 12.3254Z"
    fill="currentColor"
  />
  <path
    d="M17.1525 16.0002C15.9647 16.0002 14.9695 15.0245 14.9695 13.7888C14.9695 12.5855 15.9326 11.5774 17.1525 11.5774C18.3403 11.5774 19.3354 12.553 19.3354 13.7888C19.3354 14.992 18.3724 16.0002 17.1525 16.0002ZM17.1525 12.3254C16.3499 12.3254 15.7078 12.9758 15.7078 13.7888C15.7078 14.6018 16.3499 15.2522 17.1525 15.2522C17.955 15.2522 18.5971 14.6018 18.5971 13.7888C18.5971 12.9758 17.955 12.3254 17.1525 12.3254Z"
    fill="currentColor"
  />
  <path
    d="M5.33879 11.4471C5.17827 11.4471 5.01776 11.3495 4.98566 11.1869L4.2794 8.878C4.21519 8.68288 4.3436 8.45524 4.53622 8.3902C4.72883 8.35768 4.95355 8.45524 4.98566 8.65036L5.65981 10.9593C5.72402 11.1544 5.59561 11.3495 5.40299 11.4146C5.40299 11.4146 5.37089 11.4471 5.33879 11.4471Z"
    fill="currentColor"
  />
  <path
    d="M13.589 11.0569C13.4927 11.0569 13.3964 11.0244 13.3001 10.9268C13.1717 10.7642 13.1717 10.5366 13.3322 10.4065C13.5248 10.2114 13.6532 9.98374 13.6532 9.69106C13.6532 9.17073 13.2359 8.74797 12.7223 8.74797C12.2086 8.74797 11.7913 9.17073 11.7913 9.69106C11.7913 9.78862 11.7913 9.85366 11.8234 9.9187C11.8876 10.1138 11.7592 10.3089 11.5666 10.374C11.3739 10.439 11.1813 10.3089 11.1171 10.1138C11.085 9.98374 11.0529 9.82114 11.0529 9.69106C11.0529 8.74797 11.7913 8 12.7223 8C13.6532 8 14.3916 8.74797 14.3916 9.69106C14.3916 10.1789 14.199 10.6341 13.8459 10.9594C13.7816 11.0244 13.6853 11.0569 13.589 11.0569Z"
    fill="currentColor"
  />
  <path
    d="M14.0066 9.91857H12.883C12.6904 9.91857 12.4978 9.75597 12.4978 9.56085C12.4978 9.36573 12.6583 9.20312 12.883 9.20312H14.0066C14.1992 9.20312 14.3919 9.36573 14.3919 9.56085C14.3919 9.75597 14.2313 9.91857 14.0066 9.91857Z"
    fill="currentColor"
  />
  <path
    d="M4.21502 13.8862C4.11871 13.8862 4.0224 13.8536 3.9582 13.7886L3.09143 12.9106C3.02722 12.8455 2.99512 12.748 2.99512 12.6504V8.84552C2.99512 8.65039 3.15563 8.48779 3.38035 8.48779C3.57297 8.48779 3.76558 8.65039 3.76558 8.84552V12.4878L4.50394 13.2358C4.63235 13.3658 4.63235 13.626 4.50394 13.7561C4.40763 13.8536 4.31133 13.8862 4.21502 13.8862Z"
    fill="currentColor"
  />
  <path
    d="M16.4783 13.7889C16.4783 13.3987 16.7993 13.0735 17.1845 13.0735C17.5377 13.0735 16.4783 14.1792 16.4783 13.7889Z"
    fill="currentColor"
  />
  <path
    d="M16.4782 14.1462C16.2856 14.1462 16.093 13.9836 16.093 13.7885C16.093 13.2031 16.5746 12.7153 17.1524 12.7153C17.345 12.7153 17.5376 12.8779 17.5376 13.0731C17.5376 13.2682 17.3771 13.4308 17.1524 13.4308C16.9598 13.4308 16.8314 13.5934 16.8314 13.756C16.8314 13.9836 16.6709 14.1462 16.4782 14.1462Z"
    fill="currentColor"
  />
  <path
    d="M5.33862 13.7889C5.33862 13.3987 5.65965 13.0735 6.04488 13.0735C6.43011 13.0735 5.33862 14.1792 5.33862 13.7889Z"
    fill="currentColor"
  />
  <path
    d="M5.3386 14.1462C5.14599 14.1462 4.95337 13.9836 4.95337 13.7885C4.95337 13.2031 5.43491 12.7153 6.01276 12.7153C6.20537 12.7153 6.39799 12.8779 6.39799 13.0731C6.39799 13.2682 6.23748 13.4308 6.01276 13.4308C5.82014 13.4308 5.69173 13.5934 5.69173 13.756C5.69173 13.9836 5.53122 14.1462 5.3386 14.1462Z"
    fill="currentColor"
  />
  <path
    d="M14.4558 13.0405C14.2632 13.0405 14.0706 12.8779 14.0706 12.6827V12.6177C14.0706 12.4876 13.9421 12.3575 13.8137 12.3575H10.154C9.96141 12.3575 9.7688 12.1949 9.7688 11.9998C9.7688 11.8047 9.92931 11.6421 10.154 11.6421H13.8458C14.3916 11.6421 14.841 12.0974 14.841 12.6502V12.7153C14.841 12.8779 14.6805 13.0405 14.4558 13.0405Z"
    fill="currentColor"
  />
</SvgIcon>);
golf-icon.tsx:
import React, { FC } from "react";
import SvgIcon from "@material-ui/core/SvgIcon";
import { DEFAULT_ICON_SIZE, IconProps } from "@spodio-bits/bits.atoms.icons.base";

export type GolfIconProps = IconProps;

export const GolfIcon: FC<GolfIconProps> = React.forwardRef(({ size = DEFAULT_ICON_SIZE, ...props }, ref): JSX.Element => <SvgIcon style={{
  height: size,
  width: size,
}} viewBox="0 0 24 24" fill="none" {...props} ref={ref}>
  <path
    d="M19 9.5C19 5.375 15.625 2 11.5 2C7.375 2 4 5.375 4 9.5C4 11.75 5 13.75 6.5 15.125V17.875C6.5 18.125 6.625 18.375 6.875 18.5C8.125 18.875 9.375 19.625 9.5 21.5C9.625 21.75 9.875 22 10.25 22H12.75C13 22 13.375 21.75 13.375 21.5C13.625 20 14.875 18.875 16 18.5C16.25 18.375 16.375 18.25 16.375 17.875V15.125C18 13.75 19 11.75 19 9.5ZM5.25 9.5C5.25 6 8 3.25 11.5 3.25C13.125 3.25 14.75 3.875 15.875 5.125C17.125 6.25 17.75 7.875 17.75 9.5C17.75 13 15 15.75 11.5 15.75C8 15.75 5.25 13 5.25 9.5ZM15.25 16.125V17.375C14 18 12.75 19.125 12.25 20.75H10.75C10.375 19.125 9.375 18 7.75 17.375V16.125C8.625 16.625 9.625 16.875 10.75 16.875C11 16.875 11.25 16.875 11.5 16.875H11.625C11.875 16.875 12.125 16.875 12.25 16.875C13.375 16.875 14.375 16.625 15.25 16.125Z"
    fill="currentColor"
  />
  <path
    d="M13.375 8.375C13.7202 8.375 14 8.09518 14 7.75C14 7.40482 13.7202 7.125 13.375 7.125C13.0298 7.125 12.75 7.40482 12.75 7.75C12.75 8.09518 13.0298 8.375 13.375 8.375Z"
    fill="currentColor"
  />
  <path
    d="M13.375 6.75C13.75 6.75 14 6.5 14 6.125C14 5.75 13.75 5.5 13.375 5.5C13 5.5 12.75 5.75 12.75 6.125C12.75 6.5 13 6.75 13.375 6.75Z"
    fill="currentColor"
  />
  <path
    d="M15 7.5C15.375 7.5 15.625 7.25 15.625 6.875C15.625 6.5 15.375 6.25 15 6.25C14.625 6.25 14.375 6.625 14.375 6.875C14.375 7.25 14.75 7.5 15 7.5Z"
    fill="currentColor"
  />
  <path
    d="M15 9.125C15.375 9.125 15.625 8.875 15.625 8.5C15.625 8.125 15.375 7.875 15 7.875C14.625 7.875 14.375 8.25 14.375 8.625C14.375 8.875 14.75 9.125 15 9.125Z"
    fill="currentColor"
  />
  <path
    d="M13.375 9.99976C13.75 9.99976 14 9.74976 14 9.37476C14 8.99976 13.75 8.74976 13.375 8.74976C13 8.74976 12.75 8.99976 12.75 9.37476C12.75 9.74976 13 9.99976 13.375 9.99976Z"
    fill="currentColor"
  />
  <path
    d="M11.7499 9.125C12.1249 9.125 12.3749 8.875 12.3749 8.5C12.3749 8.125 12.1249 7.875 11.7499 7.875C11.3749 8 11.1249 8.25 11.1249 8.625C11.1249 8.875 11.3749 9.125 11.7499 9.125Z"
    fill="currentColor"
  />
  <path
    d="M11.7499 7.5C12.1249 7.5 12.3749 7.25 12.3749 6.875C12.3749 6.5 12.1249 6.25 11.7499 6.25C11.3749 6.25 11.1249 6.5 11.1249 6.875C11.1249 7.25 11.3749 7.5 11.7499 7.5Z"
    fill="currentColor"
  />
</SvgIcon>);

Hello Daniel,

I think you must be experiencing the same issue that is described here: Incorrect duplication in tsx file · Issue #2515 · SonarSource/SonarJS · GitHub

It has just been added to the next milestone so it will be tackled with the next development cycle on this analyzer.

In the meantime you could ignore those icon files from the duplication detection from your project settings:

1 Like