如何正确创建一个带有 svg 的按钮？

Question

我用 Link 创建了一个块，并将文本和 svg 图像放入其中。如何正确地将其移动到按钮的右下角？ （照片）

请问如何更改svg的背景颜色？

它是NEXT.JS框架。

多伦多证券交易所：

<section className={styles.categories}>
      <div className={`container ${styles.categories__container}`}>
        <Link href='/catalog'>
          <button
            className={`btn-reset ${styles.categories__container__button}`}
          >
            <span className={styles.categories__container__button__text}>
              ВСЕ
              <br />
              ТОВАРЫ
            </span>
            <div>
              <Image
                className={styles.categories__container__button__image}
                src='/img/categories-all.svg'
                alt='Banner Image'
                width={150}
                height={150}
              />
            </div>
          </button>
        </Link>
      </div>
</section>

SCSS：

.categories {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 495px;

  &__container {
    position: relative;
    // align-items: center;

    &__button {
      width: 270px;
      height: 216px;
      margin: 10px;
      background-color: #FFF4E7;
      border-color: #B79158;
      border-radius: 20px;
      padding: 10px 15px;
      display: inline-block;
      justify-content: space-between;
      overflow: hidden;
      // align-items: center;
      
      &__text {
        display: flex;
        font-size: 18px;
        font-weight: 500;
        text-align: left;
      }

      &__image {
        display: flex;
        position: relative;
        width: 100%;
      }
    }
  }
}

我尝试使用 png，但由于某种原因，figma 在导出时非常扭曲我的图像。

Answer 1

首先，您应该尝试检查 SVG 是否已在 DOM 内渲染，如果已渲染，则可以尝试从 scss 文件中定位

svg

或

path

并为其应用背景颜色

如果它没有在 DOM 本身中渲染，那么尝试像下面这样导入 svg

import allCategorySVG from 'path-to-svg/categories-all.svg'

然后使用导入的 SVG，如下所示

<Image src={allCategorySVG} />

希望这有帮助