How to create a button with a svg inside correctly?

Question

I created a block with Link and put text and an svg image inside. How do I move it correctly to the lower right corner of the button? (photo)

By the way, how do I change the background color of svg?

It's NEXT.JS framework. photo of the result

TSX:

<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%;
      }
    }
  }
}

I tried using png, but for some reason figma distorts my image very much when exporting.

Answer 1

First of all, you should try checking if SVG has been rendered inside your DOM, if its getting rendered then you can try targeting svg or path from your scss file and apply background color to it

And if its not getting rendered in the DOM itself, then try importing the svg like below

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

Then use the imported SVG like following

<Image src={allCategorySVG} />

Hope this helps