feat(ui/icon): optimized the way to customize the icon library

varletjs · Dec 26, 2022 · c73531c · c73531c
1 parent 4a28b51
commit c73531c
Show file tree

Hide file tree

Showing 16 changed files with 224 additions and 233 deletions.
diff --git a/packages/varlet-cli/site/components/icon/icon.less b/packages/varlet-cli/site/components/icon/icon.less
@@ -7,13 +7,24 @@
 }
 
 .var-site-icon {
+  position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   font-size: var(--site-icon-size);
   color: inherit;
   vertical-align: bottom;
 
+  &::before {
+    position: relative;
+    display: inline-block;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-weight: normal;
+    font-style: normal;
+  }
+
   &--shrinking {
     transform: scale(0);
   }

diff --git a/packages/varlet-icons/lib/index.js b/packages/varlet-icons/lib/index.js
@@ -18,7 +18,7 @@ async function build() {
 
   const { base64, publicPath, namespace, fontName, fileName, fontWeight = 'normal', fontStyle = 'normal' } = config
 
-  const { ttf, woff, woff2 } = await webfont.default({
+  const { ttf } = await webfont.default({
     files: `${SVG_DIR}/*.svg`,
     fontName,
     formats,
@@ -53,31 +53,15 @@ ${iconNames.join(',\n')}
   font-family: "${fontName}";
   src: url("${
     base64
-      ? `data:application/font-woff2;charset=utf-8;base64,${Buffer.from(woff2).toString('base64')}`
-      : `${publicPath}${fileName}-webfont.woff2`
-  }") format("woff2"),
-    url("${
-      base64
-        ? `data:application/font-woff;charset=utf-8;base64,${woff.toString('base64')}`
-        : `${publicPath}${fileName}-webfont.woff`
-    }") format("woff"),
-    url("${
-      base64
-        ? `data:font/truetype;charset=utf-8;base64,${ttf.toString('base64')}`
-        : `${publicPath}${fileName}-webfont.ttf`
-    }") format("truetype");
+      ? `data:font/truetype;charset=utf-8;base64,${ttf.toString('base64')}`
+      : `${publicPath}${fileName}-webfont.ttf`
+  }") format("truetype");
   font-weight: ${fontWeight};
   font-style: ${fontStyle};
 }
 
-.${namespace}--set,
-.${namespace}--set::before {
-  position: relative;
-  display: inline-block;
-  font: normal normal normal 14px/1 "${fontName}";
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
+.${namespace}--set {
+  font-family: "${fontName}";
 }
 
 ${icons
@@ -91,8 +75,6 @@ ${icons
 
   await Promise.all([
     writeFile(resolve(FONTS_DIR, `${fileName}-webfont.ttf`), ttf),
-    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff`), woff),
-    writeFile(resolve(FONTS_DIR, `${fileName}-webfont.woff2`), woff2),
     writeFile(resolve(CSS_DIR, `${fileName}.css`), cssTemplate),
     writeFile(resolve(CSS_DIR, `${fileName}.less`), cssTemplate),
     writeFile(resolve(DIST_DIR, 'index.js'), indexTemplate),

diff --git a/packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/checkbox-group/__tests__/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`test checkbox example 1`] = `
 "<div class=\\"app-type\\">基本使用</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -14,7 +14,7 @@ exports[`test checkbox example 1`] = `
 <div class=\\"app-type\\">设置状态值</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text\\">当前的值: 0</div>
   </div>
   <transition-stub>
@@ -24,7 +24,7 @@ exports[`test checkbox example 1`] = `
 <div class=\\"app-type\\">修改图标和颜色</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked\\" style=\\"color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked\\" style=\\"color: rgb(233, 158, 180);\\"><i class=\\"var-icon var-icon var-icon--set var-icon-heart-half-full\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
     <div class=\\"var-checkbox__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -34,7 +34,7 @@ exports[`test checkbox example 1`] = `
 <div class=\\"app-type\\">禁用</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--disabled\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--disabled\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text var-checkbox--disabled\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -44,7 +44,7 @@ exports[`test checkbox example 1`] = `
 <div class=\\"app-type\\">只读</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -56,7 +56,7 @@ exports[`test checkbox example 1`] = `
   <div class=\\"var-checkbox-group var-checkbox-group--horizontal\\">
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\">吃饭</div>
       </div>
       <transition-stub>
@@ -65,7 +65,7 @@ exports[`test checkbox example 1`] = `
     </div>
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\">睡觉</div>
       </div>
       <transition-stub>
@@ -87,7 +87,7 @@ exports[`test checkbox example 1`] = `
 <div class=\\"app-type\\">复选框字段校验</div>
 <div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text\\">当前的值: false</div>
   </div>
   <transition-stub>
@@ -99,7 +99,7 @@ exports[`test checkbox example 1`] = `
   <div class=\\"var-checkbox-group var-checkbox-group--horizontal\\">
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\">吃饭</div>
       </div>
       <transition-stub>
@@ -108,7 +108,7 @@ exports[`test checkbox example 1`] = `
     </div>
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\">睡觉</div>
       </div>
       <transition-stub>
@@ -129,7 +129,7 @@ exports[`test checkbox group layout direction 1`] = `
   <div class=\\"var-checkbox-group var-checkbox-group--vertical\\">
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\"></div>
       </div>
       <transition-stub>
@@ -138,7 +138,7 @@ exports[`test checkbox group layout direction 1`] = `
     </div>
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\"></div>
       </div>
       <transition-stub>
@@ -157,7 +157,7 @@ exports[`test checkbox group validation 1`] = `
   <div class=\\"var-checkbox-group var-checkbox-group--horizontal\\">
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text var-checkbox--error\\"></div>
       </div>
       <transition-stub>
@@ -166,7 +166,7 @@ exports[`test checkbox group validation 1`] = `
     </div>
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text var-checkbox--error\\"></div>
       </div>
       <transition-stub>
@@ -196,7 +196,7 @@ exports[`test checkbox group validation 2`] = `
   <div class=\\"var-checkbox-group var-checkbox-group--horizontal\\">
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--checked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--checked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\"></div>
       </div>
       <transition-stub>
@@ -205,7 +205,7 @@ exports[`test checkbox group validation 2`] = `
     </div>
     <div class=\\"var-checkbox__wrap\\">
       <div class=\\"var-checkbox\\">
-        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+        <div class=\\"var-checkbox__action var-checkbox--unchecked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
         <div class=\\"var-checkbox__text\\"></div>
       </div>
       <transition-stub>
@@ -222,7 +222,7 @@ exports[`test checkbox group validation 2`] = `
 exports[`test checkbox validation 1`] = `
 "<div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--unchecked var-checkbox--error\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-blank-outline var-checkbox__icon\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text var-checkbox--error\\"></div>
   </div>
   <transition-stub>
@@ -245,7 +245,7 @@ exports[`test checkbox validation 1`] = `
 exports[`test checkbox validation 2`] = `
 "<div class=\\"var-checkbox__wrap\\">
   <div class=\\"var-checkbox\\">
-    <div class=\\"var-checkbox__action var-checkbox--checked\\"><i class=\\"var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
+    <div class=\\"var-checkbox__action var-checkbox--checked\\"><i class=\\"var-icon var-icon var-icon--set var-icon-checkbox-marked var-checkbox__icon var-checkbox--with-animation\\" style=\\"transition: transform 0ms;\\" var-checkbox-cover=\\"\\"></i></div>
     <div class=\\"var-checkbox__text\\"></div>
   </div>
   <transition-stub>