Skip to content

suiyun39/babel-plugin-jsx-asset-url-import

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

bd22683 · Jan 25, 2024

History

67 Commits
Dec 12, 2023
Jan 31, 2023
Feb 10, 2023
Feb 13, 2023
Jan 31, 2023
Jan 31, 2023
Feb 1, 2023
Jan 31, 2023
Jan 31, 2023
Feb 15, 2023
Jun 18, 2023
Jun 18, 2023
Jun 18, 2023
Feb 2, 2023
Jan 25, 2024
Jan 25, 2024
Feb 13, 2023
Dec 12, 2023

Repository files navigation

babel-plugin-jsx-asset-url-import

Extract and transform static url to import in JSX

English | 简体中文

npm GitHub Workflow Status Codecov

Example

Input

import React from 'react';

const App: React.FC = () => {
  return <img src="./logo.png" alt="" />
}

Output

import React from 'react';
import _import_assets from './logo.png';

const App: React.FC = () => {
  return <img src={_import_assets} alt="" />
}

Installation & Usage

pnpm add -D babel-plugin-jsx-asset-url-import

babel.config.js

export default {
  plugins: ['jsx-asset-url-import'],
};

Options

includeAbsolute

  • type: boolean
  • default: false

Include absolute paths when extracting

tags

  • type: Record<string, string[]>

  • default:

    {
      audio: ['src'],
      embed: ['src'],
      img: ['src', 'srcSet'],
      input: ['src'],
      object: ['data'],
      source: ['src', 'srcSet'],
      track: ['src'],
      video: ['poster', 'src'],
      image: ['xlinkHref', 'href'],
      use: ['xlinkHref', 'href'],
    }

Configure tags and attributes for extraction. If you want to extract the attributes of custom components. Please add it here. Plugin internals will be merged with the default configuration

If your component is contained in object, similar to <Foo.Bar src="./logo.png" /> . Please configure as 'Foo.Bar': ['src']

If you want to disable default rules. Please configure as img: []

Reference & Thanks