vue中如何使用props变量作为scss值

template 如下：

<div v-if="isOnlineSvg"
     :style="{ '--svg-icon-url': `url(${icon})` }"
     class="svg-icon svg-icon-online"
     :class="className"/>

style 追加 svg-icon-online 样式类：

.svg-icon-online {
  background-color: currentColor;
  mask-image: var(--svg-icon-url);
  -webkit-mask-image: var(--svg-icon-url);
  mask-size: cover;
  -webkit-mask-size: cover;
  display: inline-block;
}

上面的 template 和 style 使用到 vue3 的新特性，演示了如何将一个 script 中的 props 属性传递给 scss“：

1. 首先在模板中通过 style 属性定义了一个变量 --svg-icon-url，该变量的值为 props 中的 icon 属性。
2. 在 scss 中设置 mask-image 时，使用 var 函数获取变量 --svg-icon-url 的值