通过 CSS 插入 SVG

2021 年 9 月 24 日更新

经过尝试还是用文本块 + 软换行效果最好.

使用 Flex 布局,文本块缺少额外的标签包裹.

Grid 布局需要设置行数与列数,没有办法达到最好的显示效果.

正文

通过 CSS 插入 SVG 图标,具体方法

• iconfont-阿里巴巴矢量图标库 下载需要的图标. 演示的图片下载的是大小为 32 的图标

• 在线编码转换 (oschina.net) 把下载的 SVG 用记事本打开,复制源码.

• content: url('data:image/svg+xml;%20charset=utf8,复制到此处')

效果

模板

Error:
{: style="background-color: var(--b3-card-error-background);" custom-blockinfo="error"}

Info:
{: style="background-color: var(--b3-card-info-background);" custom-blockinfo="info"}

Success:
{: style="background-color: var(--b3-card-success-background);" custom-blockinfo="success"}

Warning:
{: style="background-color: var(--b3-card-warning-background);" custom-blockinfo="warning"}

CSS

/*Block_Warning*/
[data-node-id][custom-blockinfo=warning]{
	flex-direction:row;
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
[data-node-id][custom-blockinfo=warning]::before{
	content: url('data:image/svg+xml;%20charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20t%3D%221632373961480%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222905%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M512%2085.333333c235.637333%200%20426.666667%20191.029333%20426.666667%20426.666667S747.637333%20938.666667%20512%20938.666667%2085.333333%20747.637333%2085.333333%20512%20276.362667%2085.333333%20512%2085.333333z%20m0%20544a42.666667%2042.666667%200%201%200%200%2085.333334%2042.666667%2042.666667%200%200%200%200-85.333334z%20m0-362.666666a42.666667%2042.666667%200%200%200-42.666667%2042.666666v234.666667a42.666667%2042.666667%200%201%200%2085.333334%200V309.333333a42.666667%2042.666667%200%200%200-42.666667-42.666666z%22%20p-id%3D%222906%22%20fill%3D%22%231296db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
	margin-right:10px;

}
[data-node-id][custom-blockinfo=warning] [contenteditable]{
	border-left:2px solid #e6af99AA;
	padding-left:10px;
}
/*Block_Error*/
[data-node-id][custom-blockinfo=error]{
	flex-direction:row;
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
[data-node-id][custom-blockinfo=error]::before{
	content: url('data:image/svg+xml;%20charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20t%3D%221632373971816%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%223100%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M512%2085.333333c235.637333%200%20426.666667%20191.029333%20426.666667%20426.666667S747.637333%20938.666667%20512%20938.666667%2085.333333%20747.637333%2085.333333%20512%20276.362667%2085.333333%20512%2085.333333z%20m-86.474667%20296.96a30.570667%2030.570667%200%201%200-43.232%2043.232L468.768%20512l-86.474667%2086.474667a30.570667%2030.570667%200%201%200%2043.232%2043.232L512%20555.232l86.474667%2086.474667a30.570667%2030.570667%200%201%200%2043.232-43.232L555.232%20512l86.474667-86.474667a30.570667%2030.570667%200%201%200-43.232-43.232L512%20468.768z%22%20p-id%3D%223101%22%20fill%3D%22%231296db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
	margin-right:10px;

}
[data-node-id][custom-blockinfo=error] [contenteditable]{
	border-left:2px solid #e6af99AA;
	padding-left:10px;
}
/*Block_Info*/
[data-node-id][custom-blockinfo=info]{
	flex-direction:row;
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
[data-node-id][custom-blockinfo=info]::before{
	content: url('data:image/svg+xml;%20charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20t%3D%221632373991238%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%223343%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M512%2085.333333c235.637333%200%20426.666667%20191.029333%20426.666667%20426.666667S747.637333%20938.666667%20512%20938.666667%2085.333333%20747.637333%2085.333333%20512%20276.362667%2085.333333%20512%2085.333333z%20m0%20586.666667a32%2032%200%201%200%200%2064%2032%2032%200%200%200%200-64z%20m-2.517333-373.333333c-48.416%200-92.746667%2024.16-118.613334%2063.413333a137.088%20137.088%200%200%200-15.978666%2033.237333%2032%2032%200%200%200%2060.906666%2019.690667c2.016-6.24%204.885333-12.202667%208.522667-17.717333C458.4%20375.914667%20482.709333%20362.666667%20509.482667%20362.666667%20552.277333%20362.666667%20586.666667%20396.266667%20586.666667%20437.333333s-34.4%2074.666667-77.194667%2074.666667a32%2032%200%200%200-32%2032v64a32%2032%200%200%200%2064%200v-35.584C603.946667%20558.197333%20650.666667%20503.232%20650.666667%20437.333333c0-76.757333-63.381333-138.666667-141.194667-138.666666z%22%20p-id%3D%223344%22%20fill%3D%22%231296db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
	margin-right:10px;

}
[data-node-id][custom-blockinfo=info] [contenteditable]{
	border-left:2px solid #e6af99AA;
	padding-left:10px;
}
/*Block_Success*/
[data-node-id][custom-blockinfo=success]{
	flex-direction:row;
	display: flex;
	justify-content:flex-start;
	align-items: center;
}
[data-node-id][custom-blockinfo=success]::before{
	content: url('data:image/svg+xml;%20charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20t%3D%221632373913359%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222710%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M512%2085.333333c235.637333%200%20426.666667%20191.029333%20426.666667%20426.666667S747.637333%20938.666667%20512%20938.666667%2085.333333%20747.637333%2085.333333%20512%20276.362667%2085.333333%20512%2085.333333z%20m182.613333%20297.354667a32%2032%200%200%200-45.258666%200.032L458.922667%20573.44l-84.341334-83.989333a32%2032%200%200%200-45.162666%2045.344l106.986666%20106.549333a32%2032%200%200%200%2045.226667-0.064l213.013333-213.333333a32%2032%200%200%200-0.032-45.258667z%22%20p-id%3D%222711%22%20fill%3D%22%231296db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
	margin-right:10px;

}
[data-node-id][custom-blockinfo=success] [contenteditable]{
	border-left:2px solid #e6af99AA;
	padding-left:10px;
}