fix: added svg to viewport

.github/workflows/publish.yml

@@ -16,15 +16,16 @@ jobs:
           node-version: 20.x
           cache: 'npm'
 
-      - run: npm install --frozen-lockfile
-        working-directory: packages/react
-      - run: npm run build
-        working-directory: packages/react
-      - name: Create Release Pull Request or Publish
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: npm run build
+      - name: Install dependencies
+        working-directory: ./packages/react
+        run: npm install
+
+      - name: Build React package
+        working-directory: ./packages/react
+        run: npm run build
+
+      - name: Publish to npm
+        working-directory: ./packages/react
+        run: npm publish --access public
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.npmrc

@@ -0,0 +1,2 @@
+- name: Set up npm authentication
+  run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc

packages/font/pro.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/font/pro.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/font/pro.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/font/pro.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/font/pro.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/font/unicode.html

@@ -72,12 +72,12 @@
       /* IE9*/
       src: url("pro.eot#iefix") format("embedded-opentype"),
       /* IE6-IE8 */
-      url("pro.woff2?1726489012292") format("woff2"),
-      url("pro.woff?1726489012292") format("woff"),
+      url("pro.woff2?1727278603734") format("woff2"),
+      url("pro.woff?1727278603734") format("woff"),
       /* chrome, firefox */
-      url("pro.ttf?1726489012292") format("truetype"),
+      url("pro.ttf?1727278603734") format("truetype"),
       /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-      url("pro.svg#pro?1726489012293") format("svg");
+      url("pro.svg#pro?1727278603734") format("svg");
       /* iOS 4.1- */
     }
     .iconfont {

packages/generate-icon-lib/cli/functions/generateReactComponents.ts

@@ -12,7 +12,20 @@ const __dirname = path.dirname(__filename);
 
 export function filePathToSVGinJSXSync(filePath: string, currentTempDir: string) {
   const absFilePath = path.resolve(currentTempDir, filePath);
-  const svgRaw = fs.readFileSync(absFilePath, { encoding: 'utf8' });
+  let svgRaw = fs.readFileSync(absFilePath, { encoding: 'utf8' });
+
+  // Check if viewBox exists, and if not, add it based on width and height.
+  if (!svgRaw.includes('viewBox')) {
+    const widthMatch = svgRaw.match(/width="(\d+)"/);
+    const heightMatch = svgRaw.match(/height="(\d+)"/);
+    if (widthMatch && heightMatch) {
+      const width = widthMatch[1];
+      const height = heightMatch[1];
+      const viewBox = `viewBox="0 0 ${width} ${height}"`;
+      svgRaw = svgRaw.replace(/<svg([^>]*)>/, `<svg$1 ${viewBox}>`);
+    }
+  }
+
   return transformers.readyForJSX(svgRaw);
 }
 

packages/generate-icon-lib/font/pro.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/generate-icon-lib/font/pro.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/generate-icon-lib/font/pro.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/generate-icon-lib/font/pro.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/generate-icon-lib/font/pro.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "pro";
-  src: url('pro.eot?t=1726489012277'); /* IE9*/
-  src: url('pro.eot?t=1726489012277#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("pro.woff2?t=1726489012277") format("woff2"),
-  url("pro.woff?t=1726489012277") format("woff"),
-  url('pro.ttf?t=1726489012277') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('pro.svg?t=1726489012277#pro') format('svg'); /* iOS 4.1- */
+  src: url('pro.eot?t=1727278603719'); /* IE9*/
+  src: url('pro.eot?t=1727278603719#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("pro.woff2?t=1727278603719") format("woff2"),
+  url("pro.woff?t=1727278603719") format("woff"),
+  url('pro.ttf?t=1727278603719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('pro.svg?t=1727278603719#pro') format('svg'); /* iOS 4.1- */
 }
 
 [class^="pro-"], [class*=" pro-"] {

packages/generate-icon-lib/font/unicode.html

@@ -72,12 +72,12 @@
       /* IE9*/
       src: url("pro.eot#iefix") format("embedded-opentype"),
       /* IE6-IE8 */
-      url("pro.woff2?1726489012292") format("woff2"),
-      url("pro.woff?1726489012292") format("woff"),
+      url("pro.woff2?1727278603734") format("woff2"),
+      url("pro.woff?1727278603734") format("woff"),
       /* chrome, firefox */
-      url("pro.ttf?1726489012292") format("truetype"),
+      url("pro.ttf?1727278603734") format("truetype"),
       /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-      url("pro.svg#pro?1726489012293") format("svg");
+      url("pro.svg#pro?1727278603734") format("svg");
       /* iOS 4.1- */
     }
     .iconfont {

packages/react/src/Pro24HoursFill.tsx

@@ -9,6 +9,7 @@ export const Pro24HoursFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/Pro24HoursLine.tsx

@@ -9,6 +9,7 @@ export const Pro24HoursLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/Pro4KFill.tsx

@@ -9,6 +9,7 @@ export const Pro4KFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/Pro4KLine.tsx

@@ -9,6 +9,7 @@ export const Pro4KLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProABFill.tsx

@@ -9,6 +9,7 @@ export const ProABFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProABLine.tsx

@@ -9,6 +9,7 @@ export const ProABLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountBoxFill.tsx

@@ -9,6 +9,7 @@ export const ProAccountBoxFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountBoxLine.tsx

@@ -9,6 +9,7 @@ export const ProAccountBoxLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountCircleFill.tsx

@@ -9,6 +9,7 @@ export const ProAccountCircleFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountCircleLine.tsx

@@ -9,6 +9,7 @@ export const ProAccountCircleLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountPinBoxFill.tsx

@@ -9,6 +9,7 @@ export const ProAccountPinBoxFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountPinBoxLine.tsx

@@ -9,6 +9,7 @@ export const ProAccountPinBoxLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAccountPinCircleFill.tsx

@@ -11,6 +11,7 @@ export const ProAccountPinCircleFill = React.forwardRef<
       width="24"
       height="24"
       fill="none"
+      viewBox="0 0 24 24"
       {...props}
       ref={forwardedRef}
     >

packages/react/src/ProAccountPinCircleLine.tsx

@@ -11,6 +11,7 @@ export const ProAccountPinCircleLine = React.forwardRef<
       width="24"
       height="24"
       fill="none"
+      viewBox="0 0 24 24"
       {...props}
       ref={forwardedRef}
     >

packages/react/src/ProAddBoxFill.tsx

@@ -9,6 +9,7 @@ export const ProAddBoxFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAddBoxLine.tsx

@@ -9,6 +9,7 @@ export const ProAddBoxLine = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >

packages/react/src/ProAddCircleFill.tsx

@@ -9,6 +9,7 @@ export const ProAddCircleFill = React.forwardRef<SVGSVGElement, IconProps>(
         width="24"
         height="24"
         fill="none"
+        viewBox="0 0 24 24"
         {...props}
         ref={forwardedRef}
       >