更新记录

1.1.0（2025-07-07） 下载此版本

新增渐变色支持

1.0.0（2025-01-21） 下载此版本

提交组件核心代码

平台兼容性

uni-app(4.61)

uni-app x(4.61)

其他

使用

<template>
    <sx-svg name="upload" />
    <sx-svg name="upload" width="60" height="60" color="#000" />
    <sx-svg name="upload" size="90" color="red" />
    <sx-svg name="upload" :size="[120, 120]" :gradient="['#ff00cc', '#3333ff']" />

  <sx-svg name="order" />
    <sx-svg name="order" width="60" height="60" color="#000" />
    <sx-svg name="order" size="90" color="red" />
    <sx-svg name="order" :size="[120, 120]" :gradient="['#ff00cc', '#3333ff']" />
</template>

Props

说明

svg 文件目录

svg 文件默认存在项目的/static/svg 目录下，目录定义在组件内的 SVG_FILE_PATH 常量，可以根据自己需要修改，但必须是在 static 目录下（其实 assets 目录我没测试过 ~( ´▽ ｀) ）

const SVG_FILE_PATH = "/static/svg";

const path = `${SVG_FILE_PATH}/${name}.svg`;

watch 参数

组件内部使用 $watch 监听 $props 进行更新，但实际应用场景中除了动态 icon（也可以通过 v-if 或 v-show 实现）外，在发布到生产环境时 icon 是很少会改变的。因此在开发环境中默认值为 true，方便开发过程中修改 props 参数后能更新组件，生产环境则默认为 false，以减少不必要的性能消耗（即便是很少的性能消耗...）。