@douyinfe/semi-icons-lab 2.48.0-alpha.0 → 2.48.0

package/README.md

@@ -1,9 +1,32 @@
-# semi-icons-lab
 
-Beautiful, colorful icons(experimental). JSX code generated by Semi icon.
 
-```bash
+##  📣 Introduce
+
+Beautiful, colorful icons(experimental)  design by Semi Team
+
+![](https://lf9-static.semi.design/obj/semi-tos/images/0b8d0ca0-57be-11ee-8e53-13ab794309ff.png)
+
+
+##  🚀 Getting Start
+
+### install deps
+
+```shell
 npm install @douyinfe/semi-icons-lab
 ```
 
-![](https://lf9-static.semi.design/obj/semi-tos/images/0b8d0ca0-57be-11ee-8e53-13ab794309ff.png)
+### as a react component
+
+```tsx
+import { IconAnchor } from '@douyinfe/semi-icons-lab';
+
+ReactDOM.render(<IconAnchor />, root);
+```
+
+
+
+## How to contribute icon to this package
+- Add the svg file under the path ```src/svgs/```, naming references to other files.
+- Run command ```lerna run build:icon --scope @douyinfe/semi-icons```, the corresponding tsx file will be generated under the path ```src/icons```.
+- Add the category and name of the new icon to the ```src/svgs/meta.json``` file.
+- Finally, run command ```yarn docsite``` and go to the icon page to confirm whether the icon is successfully added.

package/dist/css/semi-icons-lab.css

@@ -0,0 +1,48 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-icon {
+  display: inline-block;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  fill: currentColor;
+}
+
+.semi-icon-extra-small {
+  font-size: 8px;
+}
+
+.semi-icon-small {
+  font-size: 12px;
+}
+
+.semi-icon-default {
+  font-size: 16px;
+}
+
+.semi-icon-large {
+  font-size: 20px;
+}
+
+.semi-icon-extra-large {
+  font-size: 24px;
+}
+
+.semi-icon-spinning {
+  animation: 0.6s linear infinite semi-icon-animation-rotate;
+  animation-fill-mode: forwards;
+}
+
+@keyframes semi-icon-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=semi-icons-lab.css.map*/

package/dist/css/semi-icons-lab.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/semi-icons-lab.css","mappings":"AAAA,WAAW;AACX,WAAW;AACX,YAAY;AACZ;EACE,qBAAqB;EACrB,kBAAkB;EAClB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;EACpB,kCAAkC;EAClC,kBAAkB;AACpB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,0DAA0D;EAC1D,6BAA6B;AAC/B;;AAEA;EACE;IACE,oBAAoB;EACtB;EACA;IACE,yBAAyB;EAC3B;AACF,C","sources":["webpack://SemiIconsLab/lib/es/styles/icons.css"],"sourcesContent":["/* shadow */\n/* sizing */\n/* spacing */\n.semi-icon {\n  display: inline-block;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  text-rendering: optimizeLegibility;\n  fill: currentColor;\n}\n\n.semi-icon-extra-small {\n  font-size: 8px;\n}\n\n.semi-icon-small {\n  font-size: 12px;\n}\n\n.semi-icon-default {\n  font-size: 16px;\n}\n\n.semi-icon-large {\n  font-size: 20px;\n}\n\n.semi-icon-extra-large {\n  font-size: 24px;\n}\n\n.semi-icon-spinning {\n  animation: 0.6s linear infinite semi-icon-animation-rotate;\n  animation-fill-mode: forwards;\n}\n\n@keyframes semi-icon-animation-rotate {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}"],"names":[],"sourceRoot":""}

package/dist/css/semi-icons-lab.min.css

@@ -0,0 +1,48 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-icon {
+  display: inline-block;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  text-rendering: optimizeLegibility;
+  fill: currentColor;
+}
+
+.semi-icon-extra-small {
+  font-size: 8px;
+}
+
+.semi-icon-small {
+  font-size: 12px;
+}
+
+.semi-icon-default {
+  font-size: 16px;
+}
+
+.semi-icon-large {
+  font-size: 20px;
+}
+
+.semi-icon-extra-large {
+  font-size: 24px;
+}
+
+.semi-icon-spinning {
+  animation: 0.6s linear infinite semi-icon-animation-rotate;
+  animation-fill-mode: forwards;
+}
+
+@keyframes semi-icon-animation-rotate {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=semi-icons-lab.min.css.map*/

package/dist/css/semi-icons-lab.min.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"css/semi-icons-lab.min.css","mappings":"AAAA,WAAW;AACX,WAAW;AACX,YAAY;AACZ;EACE,qBAAqB;EACrB,kBAAkB;EAClB,cAAc;EACd,kBAAkB;EAClB,oBAAoB;EACpB,kCAAkC;EAClC,kBAAkB;AACpB;;AAEA;EACE,cAAc;AAChB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,eAAe;AACjB;;AAEA;EACE,0DAA0D;EAC1D,6BAA6B;AAC/B;;AAEA;EACE;IACE,oBAAoB;EACtB;EACA;IACE,yBAAyB;EAC3B;AACF,C","sources":["webpack://SemiIconsLab/lib/es/styles/icons.css"],"sourcesContent":["/* shadow */\n/* sizing */\n/* spacing */\n.semi-icon {\n  display: inline-block;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  text-rendering: optimizeLegibility;\n  fill: currentColor;\n}\n\n.semi-icon-extra-small {\n  font-size: 8px;\n}\n\n.semi-icon-small {\n  font-size: 12px;\n}\n\n.semi-icon-default {\n  font-size: 16px;\n}\n\n.semi-icon-large {\n  font-size: 20px;\n}\n\n.semi-icon-extra-large {\n  font-size: 24px;\n}\n\n.semi-icon-spinning {\n  animation: 0.6s linear infinite semi-icon-animation-rotate;\n  animation-fill-mode: forwards;\n}\n\n@keyframes semi-icon-animation-rotate {\n  from {\n    transform: rotate(0);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}"],"names":[],"sourceRoot":""}