open-index/open-npm huggingface dataset:
npm package: @kamcooo/babel-plugin-inline-react-svg
Description: A babel plugin that optimizes and inlines SVGs for your react components.
Author: Jordan Gensler
Latest version: 2.0.3

# babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with [SVGO](https://github.com/svg/svgo/).

For example, the following code...

```jsx
import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;
```

will be transformed into...

```jsx
import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSVG />;
```

## Installation

```
npm install --save-dev babel-plugin-inline-react-svg
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
  "plugins": [
    "inline-react-svg"
  ]
}
```

#### Options

- `ignorePattern` - A pattern that imports will be tested against to selectively ignore imports.
- `caseSensitive` - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.
- `svgo` - svgo options (`false` to disable). Example:
```json
{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

```

**Note:** If `plugins` field is specified the default enabled `svgo` plugins will be overrided. Alternatively, if your Babel config is in JavaScript, the default list of plugins can be extended by making use of the `extendDefaultPlugins` utility provided by `svgo`.

```js
const { extendDefaultPlugins } = require('svgo');

module.exports = {
  plugins: [
    [
      'inline-react-svg',
      {
        svgo: {
          plugins: extendDefaultPlugins([
            {
              name: 'removeAttrs',
              params: { attrs: '(data-name)' }
            },
            'cleanupIDs',
          ])
        }
      }
    ]
  ]
}
```

### Via CLI

```sh
$ babel --plugins inline-react-svg script.js
```

### Via Node API


```javascript
require('@babel/core').transform('code', {
  plugins: [
    ['inline-react-svg', { filename: 'filename representing the code' }],
  ]
}) // => { code, map, ast };
```

---

Inspired by and code foundation provided by [react-svg-loader](https://github.com/boopathi/react-svg-loader).
npm package: @kamdz/dx
Description: An opinionated developer experience (DX) template for TypeScript projects. Pre-configured with tools for streamlined development, including building, linting, formatting, testing, and CI/CD to ensure consistency across multiple projects.
Author: Kamil Dzwonkowski
Latest version: 1.6.11

# @kamdz/dx

**@kamdz/dx** is an opinionated, production-ready boilerplate/starter for TypeScript projects, designed to provide an optimal developer experience (DX). It comes pre-configured with best practices and essential tools for streamlined development, including building, linting, formatting, testing, and CI/CD. Every file and configuration in this project serves as a blueprint for future projects.  


🚀 **Quick start:**

```bash
npx @kamdz/dx
# or
npx @kamdz/dx [path]
```

## ✨ Features

- **TypeScript** for static typing, with **tsup** & **tsx** for builds and development
- **ESLint 9** for code linting and quality checks
- **Prettier** for consistent code formatting
- **Husky** & **lint-staged** for Git hooks to ensure code quality
- **Commitlint** & **Commitizen** for conventional commit messages
- **Semantic Release** for automated versioning and changelogs
- **Jest** for unit testing with coverage
- **GitHub Actions** for CI/CD

## 📜 Available Commands

| Polecenie          | Opis                                                 |
|--------------------|------------------------------------------------------|
| `yarn build`      | Bundle your code to ES Module and CommonJS with **tsup** |
| `yarn cli`        | Run the custom CLI in `bin/cli.ts`                   |
| `yarn commit`     | Use **commitizen** for conventional commits          |
| `yarn dev`        | Start development mode with **tsx**                  |
| `yarn dx`         | Update your project with the latest **@kamdz/dx**    |
| `yarn format`     | Format code with **Prettier**                        |
| `yarn lint`       | Lint and auto-fix issues with **ESLint**             |
| `yarn start`      | Run the project with **tsx**                         |
| `yarn test`       | Run tests with **Jest** with coverage                |
| `yarn type-check` | Type-check your project using **TypeScript**         |

## 🤔 Why?

While monorepos with shared configs (ESLint, Prettier, TypeScript) are helpful, they still involve setting up boilerplate files for every project. **@kamdz/dx** simplifies this by providing a template repository. You can modify rules or tools, and propagate those changes to all your projects with a single command, ensuring a consistent developer experience across them.

## 🔧 Customization

To create your own `@user/dx`, fork this repository, modify whatever you need (except for the `bin` and `src` directories), and update the `name`, `bugs`, `repository`, `author`, `scripts.dx` in `package.json`. Done!

If you enjoy this project, please ⭐️ it!