vue3怎么使用svg

如何在 Vue 3 中使用 SVG
使用 svg-vue-loader 导入单个 SVG 文件
为了使 Vue 能够识别并处理单独的 SVG 文件，可以采用特定加载器如 svg-vue-loader。这允许开发者通过简单的引入方式来加载SVG文件作为Vue组件的一部分[^1]。
// 安装依赖
npm install svg-vue-loader --save-dev
登录后复制
接着，在 Webpack 配置中添加如下配置：
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-vue-loader'
}
]
}
};
登录后复制
对于 Vite 用户，则可以通过安装 vite-plugin-svg-icons 插件简化此过程，并按照官方文档指导完成相应设置[^2]。
创建全局可用的 SVG 图标库
如果希望创建一组可以在整个应用程序范围内使用的图标集合，那么利用 svg-sprite-loader 是一种有效的方法。这种方法会将所有的SVG图形编译成一个精灵表（sprite sheet），从而减少HTTP请求次数提高性能效率。
首先确保已经安装了必要的工具包:
npm i -D vite-plugin-svg-icons
登录后复制
随后修改项目的入口文件以注册这些图标供后续调用：
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.component('icon', (props) => ({
render() {
const symbolId = props.name ? `#${props.name}` : '';
return (
<svg class="svg-icon">
<use xlinkHref={`${symbolId}`} />
</svg>
);
},
}));

app.mount('#app');
登录后复制
最后，在需要的地方简单地插入 <icon name="star"></icon> 即可展示对应的图标。
引入第三方图标的例子
除了自行准备或本地存储外，还可以考虑借助 FontAwesome 提供的一系列高质量矢量图标资源。只需从其官方NPM仓库下载所需项即可快速集成到项目当中去[^3]:
import { faTimesCircle } from '@fortawesome/free-regular-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
library.add(faTimesCircle);
登录后复制
以上方法展示了不同场景下的解决方案，具体选择取决于实际需求和个人偏好。