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 的值