将SVG图标用JavaScript（JS）定义是一种常见的做法，主要是因为这种方式提供了更多的灵活性和控制。这种做法有几个关键优点：
- 动态性：使用JS定义SVG允许开发者动态地改变图标的属性，比如颜色、大小等。这意味着你可以根据应用程序的状态或用户的交互来调整图标，而不需要为每种变体都保存一个独立的SVG文件。
- 组件化：在Vue中，可以将SVG图标封装成组件，这样可以在整个应用中重复使用它们，同时保持代码的DRY（Don’t Repeat Yourself）原则。这也使得管理和更新图标变得更加方便。
- 性能优化：通过JS控制SVG，可以减少HTTP请求的数量，因为图标作为组件的一部分直接嵌入到了代码中。相比之下，如果你通过img标签或CSS背景图片引用SVG文件，每个图标都可能需要一个单独的HTTP请求。