vue3+js+vite学习之使用svg图标，并且支持svg图标渐变色

在Vue 3 + Vite项目中使用SVG图标并支持渐变色，可以通过以下步骤实现：

1. 将SVG图标转换为Vue组件。
2. 使用<svg>元素和<defs>以及<linearGradient>定义渐变色。

以下是一个简单的Vue组件示例，它加载一个SVG文件并应用渐变色：

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="url(#gradient)"
    :width="size"
    :height="size"
  >
    <path
      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"
    />
    <defs>
      <linearGradient
        id="gradient"
        x1="0%"
        y1="0%"
        x2="100%"
        y2="0%"
      >
        <stop offset="0%" stop-color="red" />
        <stop offset="100%" stop-color="blue" />
      </linearGradient>
    </defs>
  </svg>
</template>
 
<script>
export default {
  name: 'SvgIcon',
  props: {
    size: {
      type: String,
      default: '24'
    }
  }
}
</script>

在上面的代码中，<linearGradient>定义了一个水平渐变，从红色渐变到蓝色。通过stroke="url(#gradient)"将渐变应用到图标的描边上。

要在你的Vue组件中使用这个SVG图标，可以这样做：

<template>
  <div>
    <!-- 使用SvgIcon组件，并传入size属性 -->
    <SvgIcon size="36" />
  </div>
</template>
 
<script>
import SvgIcon from './components/SvgIcon.vue';
 
export default {
  components: {
    SvgIcon
  }
}
</script>

确保你的Vue组件和SVG文件在同一个目录下，或者根据实际路径修改import语句。这样就可以在Vue应用中使用SVG图标，并且支持渐变色了。