Ensure icons are imported individually from @styled-icons/*
npm install eslint-plugin-styled-icons-importsThis ESLint plugin enforces individual icon imports from @styled-icons packages.
Tested against ESLint 8.
Splits imports into standalone imports, and ensures each icon is imported individually. This can aid with readability and sorting of imports. It also reduces the overhead for tree-shaking, as only the icons that are used will be referenced.
It can autofix imports to the correct format.
``javascript
// Incorrect usage
import { Check, Label as LabelIcon } from "@styled-icons/boxicons-regular";
// Correct usage
import { Check } from "@styled-icons/boxicons-regular/Check";
import { Label as LabelIcon } from "@styled-icons/boxicons-regular/Label";
`
To use this plugin, you’ll need to have eslint and this plugin installed in your project.
`bash`
npm install eslint-plugin-styled-icons-imports --save-dev
To use the recommended error status, add the plugin’s recommended setup to your ESLint extends:
`javascript`
// .eslintrc.js
module.exports = {
extends: ["plugin:styled-icons-imports/recommended"],
};
To use warnings instead of errors, you can tweak the rule manually:
`javascript`
// .eslintrc.js
module.exports = {
plugins: ["styled-icons-imports"],
rules: {
"styled-icons-imports/no-direct-icon-imports": "warn",
},
};
This plugin includes unit tests to verify its functionality. The tests use vitest, with eslint’s RuleTester for ESLint rule-specific testing.
`bash``
npm install
npm run test