feat: allow ignoring lists of components

README.md

@@ -315,3 +315,14 @@ Examples of correct code for the `{ "ignoreProperty": ["foo"] }` option:
 /*eslint i18next/no-literal-string: ["error", { "ignoreProperty": ["foo"] }]*/
 const a = { foo: 'bar' };
 ```
+
+#### ignoreComponent
+
+The `ignoreComponent` option specifies exceptions not to check for string literals inside a list of named components. It includes `<Trans>` per default.
+
+Examples of correct code for the `{ "ignoreComponent": ["Icon"] }` option:
+
+```jsx
+/*eslint i18next/no-literal-string: ["error", { "ignoreComponent": ["Icon"] }]*/
+<Icon>arrow<Icon/>
+```

lib/rules/no-literal-string.js

@@ -46,6 +46,12 @@ module.exports = {
               type: 'string'
             }
           },
+          ignoreComponent: {
+            type: 'array',
+            items: {
+              type: 'string'
+            }
+          },
           markupOnly: {
             type: 'boolean'
           }
@@ -114,6 +120,11 @@ module.exports = {
     }
 
     // Ignore the Trans component for react-i18next compatibility
+    let ignoredComponents = ['Trans'];
+    if (option && option.ignoreComponent)
+      ignoredComponents = ignoredComponents.concat(option.ignoreComponent);
+    console.error(ignoredComponents);
+
     function hasValidElementName(node) {
       let currentNode = node;
       while (
@@ -122,7 +133,11 @@ module.exports = {
         currentNode.parent.openingElement &&
         currentNode.parent.openingElement.name
       ) {
-        if (currentNode.parent.openingElement.name.name === 'Trans') {
+        if (
+          ignoredComponents.includes(
+            currentNode.parent.openingElement.name.name
+          )
+        ) {
           return true;
         }
         currentNode = currentNode.parent;

tests/lib/rules/no-literal-string.js

@@ -95,6 +95,7 @@ ruleTester.run('no-literal-string', rule, {
     { code: '<DIV foo="bar" />', options: [{ ignoreAttribute: ['foo'] }] },
     { code: '<Trans>foo</Trans>' },
     { code: '<Trans><span>bar</span></Trans>' },
+    { code: '<Icon>arrow</Icon>', options: [{ ignoreComponent: ['Icon'] }] },
     { code: 'a + "b"', options: [{ markupOnly: true }] },
     { code: '<div>{import("abc")}</div>', options: [{ markupOnly: true }] },
     {