docs: update readme

hunghg255 · Dec 20, 2023 · eb6e5e9 · eb6e5e9
1 parent 1fa526c
commit eb6e5e9
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csvgtocss",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Convert svg to css",
   "source": "src/index.ts",
   "main": "./dist/index.mjs",

diff --git a/src/index.ts b/src/index.ts
@@ -76,8 +76,8 @@ export const svg2Font = async (options: SvgToCssOptions) => {
       prefix,
     });
 
-    const svgMonotone: any = [];
-    const svgMultitone: any = [];
+    const svgMonochrome: any = [];
+    const svgMultichrome: any = [];
 
     // Validate, clean up, fix palette and optimise
     await iconSet.forEach(async (name, type) => {
@@ -98,10 +98,10 @@ export const svg2Font = async (options: SvgToCssOptions) => {
         cleanupSVG(svg);
 
         // check svg is monotone
-        const isMonotone = svgHasOnlyPathChild(svg.toString());
+        const isMonochrome = svgHasOnlyPathChild(svg.toString());
         // Assume icon is monotone: replace color with currentColor, add if missing
         // If icon is not monotone, remove this code
-        if (isMonotone) {
+        if (isMonochrome) {
           await parseColors(svg, {
             defaultColor: 'currentColor',
             callback: (attr, colorStr, color) => {
@@ -113,13 +113,13 @@ export const svg2Font = async (options: SvgToCssOptions) => {
         // Optimise
         runSVGO(svg);
 
-        if (isMonotone) {
-          svgMonotone.push({
+        if (isMonochrome) {
+          svgMonochrome.push({
             name,
             prefix,
           });
         } else {
-          svgMultitone.push({
+          svgMultichrome.push({
             name,
             prefix,
           });
@@ -138,21 +138,21 @@ export const svg2Font = async (options: SvgToCssOptions) => {
     let cssMonofont = '';
     let cssMultifont = '';
 
-    if (svgMonotone?.length) {
+    if (svgMonochrome?.length) {
       cssMonofont = getIconsCSS(
         iconSet.export(),
-        svgMonotone.map((it: any) => it.name),
+        svgMonochrome.map((it: any) => it.name),
         {
           iconSelector: `.${prefix}-{name}`,
           commonSelector: '',
         },
       );
     }
 
-    if (svgMultitone?.length) {
+    if (svgMultichrome?.length) {
       cssMultifont = getIconsCSS(
         iconSet.export(),
-        svgMultitone.map((it: any) => it.name),
+        svgMultichrome.map((it: any) => it.name),
         {
           iconSelector: `.${prefix}-{name}`,
           commonSelector: '',
@@ -166,7 +166,7 @@ ${cssMultifont}
 `;
 
     const type = `
-export type T${prefix} = ${[...svgMonotone, ...svgMultitone]
+export type T${prefix} = ${[...svgMonochrome, ...svgMultichrome]
       .map((it: any) => `'${prefix}-${it?.name}'`)
       .join(' | ')};
 `;
@@ -178,8 +178,8 @@ export type T${prefix} = ${[...svgMonotone, ...svgMultitone]
       genHtml({
         cssContent,
         prefix,
-        svgMonotone,
-        svgMultitone,
+        svgMonochrome,
+        svgMultichrome,
       }),
     );
 

diff --git a/src/templates/index.ts b/src/templates/index.ts
@@ -22,7 +22,7 @@ ${cssString}
   `;
 };
 
-export const genHtml = ({ cssContent, prefix, svgMonotone, svgMultitone }: any) => {
+export const genHtml = ({ cssContent, prefix, svgMonochrome, svgMultichrome }: any) => {
   return `
   <!DOCTYPE html>
   <html lang="en">
@@ -112,9 +112,9 @@ export const genHtml = ({ cssContent, prefix, svgMonotone, svgMultitone }: any)
         <h1>${prefix}</h1>
       </div>
       <div class="icons">
-        <h3>Icon Monotone</h3>
+        <h3>Icon Monochrome</h3>
         <ul>
-          ${svgMonotone
+          ${svgMonochrome
             .map((it: any) => {
               return `<li class="class-icon">
                 <i class="${prefix}-${it.name}"></i>
@@ -127,9 +127,9 @@ export const genHtml = ({ cssContent, prefix, svgMonotone, svgMultitone }: any)
 
         <br />
 
-        <h3>Icon Multitone</h3>
+        <h3>Icon Multiplechrome</h3>
         <ul>
-        ${svgMultitone
+        ${svgMultichrome
           .map((it: any) => {
             return `<li class="class-icon">
               <i class="${prefix}-${it.name}"></i>

diff --git a/test/svgtocss.config.ts b/test/svgtocss.config.ts
@@ -3,5 +3,5 @@ import { defineConfig } from '../dist/index.mjs';
 export default defineConfig({
   src: 'svg', // svg path
   dist: 'dist/iconcss', // output path
-  fontName: 'hihi', // font name
+  prefix: 'icon', // font name
 });