ant design vue src/core/icons.js 引入svg 不显示
时间: 2023-12-08 10:06:58 浏览: 237
解决vue 项目引入字体图标报错、不显示等问题
如果您在使用 Ant Design Vue 时,引入 SVG 图标后发现无法显示,可能是以下原因导致的:
1. 检查 SVG 图标路径是否正确,路径错误可能导致无法正确加载图标。
2. 确保您的 SVG 图标文件内容正确,可以尝试使用其他 SVG 图标文件进行测试。
3. 确认您的 Vue 项目是否正确设置了 SVG Loader。可以在 webpack 配置文件中添加如下代码:
```
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
```
其中,`resolve('src/icons')` 是您存放 SVG 图标的目录,`symbolId` 是指定 SVG Sprite 的 ID。
4. 检查您的 ant design vue 配置文件是否正确设置,可以在 `vue.config.js` 文件中添加如下代码:
```
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
```
其中,`resolve('src/icons')` 是您存放 SVG 图标的目录,`symbolId` 是指定 SVG Sprite 的 ID。
希望这些信息能够帮助您解决问题。
阅读全文