架构还有很多不确定性

.gitignore

@@ -13,3 +13,4 @@
 /images/*.fw.png
 /monsters-info/package-lock.json
 /images/project file/awokens
+/images/project file/types

css/svg-icon.css

@@ -17,17 +17,20 @@ svg {
     dominant-baseline: middle;
     /* 文本垂直居中 */
 }
+.back {
+	fill: var(--back-color);
+}
 .front {
-	fill: currentColor;
+	fill: var(--front-color);
 }
 [type="awoken-count"] use {
-	fill: white;
-	color: #096E11;
+	--back-color: white;
+	--front-color: #096E11;
 }
 [type="awoken-count"][icon-type="latent"] use {
-	color: #378DE8;
+	--front-color: #378DE8;
 }
 [type="awoken-count"][special][full]:not([icon-type="latent"]) use {
-	fill: #FFFFD4;
-	color: #F3DC69;
+	--back-color: #FFFFD4;
+	--front-color: #F3DC69;
 }

script-custom_elements.js

@@ -122,6 +122,7 @@ class PadIcon extends HTMLElement {
 			//'icon-value',//子图标的值
 			'full',//觉醒打满
 			'special',//是否是特殊颜色
+			'flags', //各种选项开关，类似className
 		];
 	}
 	#number = 0;