CSS3（svg使用）

https://blog.csdn.net/promiseCao/article/details/83276410

const RuleImage: React.FC = () => {
  return (
    <div className={styles.title}>
      <svg width="1104px" height="40px" viewBox="0 0 1104 40" version="1.1">
        <g id="【活动)" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
          <g id="1窗" transform="translate(-1488.000000, -2991.000000)">
            <g id="title_rule_1100" transform="translate(1488.000000, 2991.000000)">
              <rect id="矩" fill="#D8D8D8" opacity="0" x="0" y="0" width="1100" height="40"></rect>
              <path d="" id="形状" fill="#4385F8"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
  );
};

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  svg {
    path {
      fill: var(--theme_COLOR);
    }
  }
}