jeecgboot 框架自定义图标后图标有<i aria-label="图标: icon-Flightfadongji" class="anticon anticon-icon-Flightfadongji">部分,但没有<svg .......</svg>,该怎么办
时间: 2024-10-09 09:14:49 浏览: 66
JeecgBoot框架中,自定义图标如果只是显示`<i>`标签内的文字而没有`<svg>`内容,这通常是由于使用的不是真正的SVG图标,而是Ant Design图标库中的文本描述。Anticon是一个轻量级的图标集,它并不直接提供SVG文件。
如果你需要完整的SVG图标,你需要:
1. 首先确认你的图标是否支持Ant Design的Icon包。如果不是标准的Ant Design图标,你需要找对应的SVG文件,可以在一些在线图标网站(如Font Awesome、Material Icons等)搜索并下载。
2. 将SVG文件替换或添加到你的项目资源目录下,并给图标分配一个名称,例如`flight-fadongji.svg`。
3. 使用Ant Design提供的`@ant-design/icons`库,可以将SVG转换为组件形式。在HTML中,你可以这样做:
```html
<i :class="{ 'anticon': true, 'anticon-flight-fadongji': true }"></i>
```
或者在CSS里动态绑定:
```css
.custom-icon {
font-family: "anticon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.custom-icon-flight-fadongji:before {
content: "\e607"; /* 这里引用你的SVG对应字符编码 */
}
```
4. 如果你想完全控制图标样式,也可以直接引入SVG并在CSS中编写样式。
记得更新你的配置,确保Ant Design能够找到你的自定义图标路径。
阅读全文