Code

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "standard",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:security/recommended-legacy"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "semi": ["error", "always"],
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"],
+    "@typescript-eslint/no-var-requires": "off",
+    "space-before-function-paren": "off",
+    "security/detect-non-literal-fs-filename": "off",
+    "security/detect-non-literal-require": "off",
+    "security/detect-non-literal-regexp": "off",
+    "indent": "off"
+  }
+}

.github/workflows/codeql.yml

@@ -0,0 +1,83 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: 'CodeQL'
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+  schedule:
+    - cron: '21 12 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners
+    # Consider using larger runners for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: []
+        # CodeQL supports [ 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift' ]
+        # Use only 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: '/language:${{matrix.language}}'

.github/workflows/node.js.yml

@@ -0,0 +1,28 @@
+name: Node.js CI
+
+on:
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    name: Lint & Build
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 19.x, 20.x, 21.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn lint
+      - name: Build
+        run: yarn build

.github/workflows/publish.yml

@@ -0,0 +1,74 @@
+name: Publish to Registry
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    name: Build & Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 21.0
+        uses: actions/setup-node@v3
+        with:
+          node-version: 21.0
+          cache: 'yarn'
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn lint
+      - name: Build
+        run: yarn build
+
+  publish-npm:
+    name: Publish to NPM
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    environment:
+      name: NPM
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 21.0
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21.0
+          cache: 'yarn'
+          registry-url: https://registry.npmjs.org/
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - name: Publish
+        run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+  publish-github:
+    name: Publish to GitHub
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 21.0
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21.0
+          cache: 'yarn'
+          registry-url: https://npm.pkg.github.com
+          scope: '@raresail'
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - name: Publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -128,3 +128,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.DS_Store
+src/icons

.npmignore

@@ -0,0 +1,2 @@
+src
+post-build.icons.js

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true
+}

.svgrrc.js

@@ -0,0 +1,14 @@
+const path = require('path');
+
+module.exports = {
+  template: require('./templates/svg.js'),
+  typescript: true,
+  outDir: path.join('src', 'icons'),
+  memo: true,
+  icon: true,
+  svgProps: {
+    className: '{className}',
+    fill: "{'#000'}",
+    style: '{style}'
+  }
+};

README.md

@@ -1 +1,56 @@
-# react-ionicons
+# @raresail/react-ionicons
+
+### The current version uses the ionicons version `7.3.0`
+
+This packages uses the svg icons from [ionic-team/ionicons](https://github.com/ionic-team/ionicons) and builds them as React Components to be used in the application
+
+### Usage
+
+Install the module
+
+```bash
+npm install --save @raresail/react-ionicons;
+```
+
+```bash
+yarn add @raresail/react-ionicons;
+```
+
+Import the icons
+
+```ts
+import { AddCircleOutline } from '@raresail/react-ionicons';
+```
+
+Use the icon, to change the size of the icon use the `font-size` property
+
+```tsx
+function Component() {
+  return (
+    <AddCircleOutline
+      // To change the icon color
+      color="red"
+      // To change any style related to the svg or font size
+      style={{
+        fontSize: '20px'
+      }}
+      // If you need to add extra props use
+      svgProps={{}}
+      // For icons that use strokeWidth you can change it like this
+      strokeWidth={32}
+      // to add a class name to the svg
+      className="your class"
+    />
+  );
+}
+```
+
+### Properties
+
+| Name        | Type          | Default  |
+| ----------- | ------------- | -------- |
+| svgProps    | SVGProps      | {}       |
+| style       | CSSProperties | {}       |
+| strokeWidth | number        | 32 or 16 |
+| className   | string        |          |
+| color       | string        | #000     |

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@raresail/react-ionicons",
+  "version": "1.0.0",
+  "repository": "[email protected]:RaresAil/react-ionicons.git",
+  "author": "RaresAil <[email protected]>",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@svgr/cli": "^8.1.0",
+    "@types/react": "^18.2.70",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "eslint": "^8.55.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-security": "^2.1.1",
+    "postcss": "^8.4.38",
+    "react": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
+  },
+  "scripts": {
+    "build:icons": "rimraf ./src/icons && svgr ./src/svg && node post-build-icons.js",
+    "build": "rimraf ./dist && yarn run build:icons && rollup -c --bundleConfigAsCjs",
+    "lint": "eslint src/**/*.ts"
+  }
+}

post-build-icons.js

@@ -0,0 +1,36 @@
+const fs = require('fs/promises');
+const path = require('path');
+
+(async () => {
+  const iconsPath = path.join('src', 'icons');
+  const icons = await fs.readdir(iconsPath, {
+    encoding: 'utf8'
+  });
+
+  await Promise.all(
+    icons.map(async (file) => {
+      const iconPath = path.join(iconsPath, file);
+      const content = await fs.readFile(iconPath, {
+        encoding: 'utf8'
+      });
+
+      await fs.writeFile(
+        iconPath,
+        content
+          .replace(/'#000'/gm, "color || '#000'")
+          .replace(/"#000"/gm, "{color || '#000'}")
+          .replace(
+            /strokeWidth={([0-9]+)}/gm,
+            'strokeWidth={strokeWidth === undefined ? $1 : strokeWidth}'
+          )
+          .replace(
+            /strokeWidth: ([0-9]+)/gm,
+            'strokeWidth: strokeWidth === undefined ? $1 : strokeWidth'
+          ),
+        {
+          encoding: 'utf8'
+        }
+      );
+    })
+  );
+})();