更新记录

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

提交组件核心代码

平台兼容性

使用

<template>
  <sx-svg name="upload" />
  <sx-svg name="upload" size="60" color="red" />
  <sx-svg name="upload" width="120" height="120" color="#000" />

  <sx-svg name="order" />
  <sx-svg name="order" size="60" color="red" />
  <sx-svg name="order" width="120" height="120" color="#000" />
</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，以减少不必要的性能消耗（即便是很少的性能消耗...）。