eslint-plugin-svg-import-helper v1.0.3

Eslint plugin mobx observer checker

Plugin for eslint that checks if you import svg incorrect (see exmaples..)

Table of Contents

• Installation
• Config
• What you need for linter works
• Example

Installation

$ npm install eslint-plugin-svg-import-helper --save-dev

Config

Update eslint config

"plugins": [
	...
	"svg-import-helper"
],
"rules": {
	...
	"svg-import-helper/correct-import": "warn"
}

What you need for linter works

Modify webpack config. svg?url imported like url, svg with @svgr/webpack:

			{
				test: /\.svg$/,
				oneOf: [
					{
						resourceQuery: /url/,
						issuer: /\.(js|ts)x?$/,
						type: 'asset/resource',
						generator: {
							filename: 'images/[name].[contenthash][ext]',
						},
					},
					{
						type: 'asset/resource',
						issuer: /\.(s?css|sass)$/,
						generator: {
							filename: 'images/[name].[contenthash][ext]',
						},
					},
					{
						issuer: /\.(js|ts)x?$/,
						use: '@svgr/webpack',
					}
				]
			},

If you use typescript declare svg?url like this:

declare module "*.svg" {
	const content: React.FunctionComponent<React.SVGAttributes<SVGAElement>>;
	export default content;
}

declare module "*.svg?url" {
	const path: string;
	export default path;
}

Example

// Error
import Twitter from 'icons/twitter.svg?url';
import twitter from 'icons/twitter.svg';

// Good 
import Twitter from 'icons/twitter.svg';
import twitter from 'icons/twitter.svg?url';

<Twitter />
<img srg={twitter} alt='twitter logo'>