@benefex/icons 0.46.0 → 0.47.0

package/README.md

@@ -7,6 +7,7 @@ SVGs are automatically converted to TSX using [svgr](https://react-svgr.com/)
 - Add or update the svg in `src/svgs`
 - Make sure it has `fill="currentColor` or `stroke="currentColor"`
 - Make sure it has a viewBox (width, height will be removed)
+- If the icon is directional (it points left or right, such as an arrow, chevron or log-out icon), add `data-bfx-rtl="flip"` to the root `<svg>` so it mirrors in RTL. See [RTL support](#rtl-support).
 
 ### Versioning
 Use [semantic versioning](https://semver.org):
@@ -65,3 +66,38 @@ import { SparklesLight } from '@benefex/icons';
   <SparklesLight aria-hidden="true" />
 </span>;
 ```
+
+### RTL support
+
+Directional icons mirror in right-to-left contexts. Import the RTL stylesheet once and they flip whenever they sit inside an element with `dir="rtl"` (or `direction: rtl`):
+
+```js
+import '@benefex/icons/rtl.css';
+import { ArrowRightLight } from '@benefex/icons';
+
+<div dir="rtl">
+  <ArrowRightLight aria-hidden="true" />
+</div>;
+```
+
+Nothing flips unless the stylesheet is imported.
+
+To opt out for an icon that means a physical direction (for example a map or compass arrow), wrap it in an element with `dir="ltr"`. The icon follows its nearest `dir`, so only that icon is affected:
+
+```js
+<span dir="ltr">
+  <ArrowRightLight aria-hidden="true" />
+</span>
+```
+
+If you can't add a wrapper, add `bfx-icon--rtl-fixed` to the icon or any of its parents instead:
+
+```js
+<ArrowRightLight className="bfx-icon--rtl-fixed" aria-hidden="true" />
+```
+
+#### Marking an icon as RTL
+
+Add `data-bfx-rtl="flip"` to the root `<svg>` in `src/svgs`. Only do this when a mirrored copy is the correct RTL icon, i.e. the artwork is a plain mirror image. Don't add it to icons with text, logos, or symbols that read the same way in every language.
+
+The attribute passes through the generator unchanged. Check the result in the `Icons/RTL` Storybook story.

package/dist/AngleLeftLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const AngleLeftLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
+const AngleLeftLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M52.7 267.3c-6.2-6.2-6.2-16.4 0-22.6l160-160c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6L86.6 256l148.7 148.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0z" })));
 export default AngleLeftLight;

package/dist/AngleLeftThin.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const AngleLeftThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
+const AngleLeftThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M50.3 261.7c-3.1-3.1-3.1-8.2 0-11.3l176-176c3.1-3.1 8.2-3.1 11.3 0s3.1 8.2 0 11.3L67.3 256l170.4 170.3c3.1 3.1 3.1 8.2 0 11.3s-8.2 3.1-11.3 0l-176-176z" })));
 export default AngleLeftThin;

package/dist/AngleRightLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const AngleRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
+const AngleRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M267.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-160 160c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L233.4 256 84.7 107.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0z" })));
 export default AngleRightLight;

package/dist/AngleRightThin.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const AngleRightThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
+const AngleRightThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M269.7 250.3c3.1 3.1 3.1 8.2 0 11.3l-176 176c-3.1 3.1-8.2 3.1-11.3 0s-3.1-8.2 0-11.3L252.7 256 82.3 85.7c-3.1-3.1-3.1-8.2 0-11.3s8.2-3.1 11.3 0l176 176z" })));
 export default AngleRightThin;

package/dist/ArrowLeftLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ArrowLeftLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "aria-labelledby": titleId, ...props },
+const ArrowLeftLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 448 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l176 176c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272H432c8.8 0 16-7.2 16-16s-7.2-16-16-16H54.6L203.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0z" })));
 export default ArrowLeftLight;

package/dist/ArrowRightFromBracketLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ArrowRightFromBracketLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
+const ArrowRightFromBracketLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-128-128c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240H176c-8.8 0-16 7.2-16 16s7.2 16 16 16h281.4L356.7 372.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0zM176 64c8.8 0 16-7.2 16-16s-7.2-16-16-16H80C35.8 32 0 67.8 0 112v288c0 44.2 35.8 80 80 80h96c8.8 0 16-7.2 16-16s-7.2-16-16-16H80c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48z" })));
 export default ArrowRightFromBracketLight;

package/dist/ArrowRightFromBracketThin.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ArrowRightFromBracketThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
+const ArrowRightFromBracketThin = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M509.7 261.7c3.1-3.1 3.1-8.2 0-11.3l-136-136c-3.1-3.1-8.2-3.1-11.3 0s-3.1 8.2 0 11.3L484.7 248H168c-4.4 0-8 3.6-8 8s3.6 8 8 8h316.7L362.3 386.3c-3.1 3.1-3.1 8.2 0 11.3s8.2 3.1 11.3 0l136-136zM184 48c4.4 0 8-3.6 8-8s-3.6-8-8-8H88C39.4 32 0 71.4 0 120v272c0 48.6 39.4 88 88 88h96c4.4 0 8-3.6 8-8s-3.6-8-8-8H88c-39.8 0-72-32.2-72-72V120c0-39.8 32.2-72 72-72z" })));
 export default ArrowRightFromBracketThin;

package/dist/ArrowRightLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ArrowRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", "aria-labelledby": titleId, ...props },
+const ArrowRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 448 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "m443.7 266.8-165.9 176c-3.3 3.5-8.7 5.2-12.3 5.2-3.986 0-7.988-1.375-11.16-4.156-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59C7.419 272 0 264.845 0 256.9S7.421 240 16.59 240h377.3L253.19 90.7c-6.157-6.531-5.655-16.66 1.118-22.59 6.789-5.906 17.27-5.469 23.45 1.094l165.9 176a15.73 15.73 0 0 1 .042 21.596" })));
 export default ArrowRightLight;

package/dist/ChevronRightLight.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ChevronRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
+const ChevronRightLight = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 320 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M299.3 244.7c6.2 6.2 6.2 16.4 0 22.6l-192 192c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L265.4 256 84.7 75.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0z" })));
 export default ChevronRightLight;

package/dist/ChevronsLeftRegular.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ChevronsLeftRegular = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
+const ChevronsLeftRegular = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M47 239c-9.4 9.4-9.4 24.6 0 33.9L239 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 273 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0zM431 47 239 239c-9.4 9.4-9.4 24.6 0 33.9L431 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-175-175L465 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0z" })));
 export default ChevronsLeftRegular;

package/dist/ChevronsRightRegular.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const ChevronsRightRegular = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
+const ChevronsRightRegular = ({ title, titleId, ...props }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "data-bfx-rtl": "flip", viewBox: "0 0 512 512", "aria-labelledby": titleId, ...props },
     title ? React.createElement("title", { id: titleId }, title) : null,
     React.createElement("path", { fill: "currentColor", d: "M465 239c9.4 9.4 9.4 24.6 0 33.9L273 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L239 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0zM81 47l192 192c9.4 9.4 9.4 24.6 0 33.9L81 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L47 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z" })));
 export default ChevronsRightRegular;

package/dist/rtl.css

@@ -0,0 +1,9 @@
+[data-bfx-rtl="flip"]:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* Class alternative to dir="ltr" for opting out. Works on the icon or an ancestor. */
+.bfx-icon--rtl-fixed[data-bfx-rtl="flip"]:dir(rtl),
+.bfx-icon--rtl-fixed [data-bfx-rtl="flip"]:dir(rtl) {
+  transform: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benefex/icons",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "Benefex icon package",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./animations.css": "./dist/animations.css"
+    "./animations.css": "./dist/animations.css",
+    "./rtl.css": "./dist/rtl.css"
   },
   "sideEffects": [
     "**/*.css"
@@ -25,7 +26,7 @@
     "clean": "rm -rf ./generated && rm -rf ./dist",
     "build:icons": "svgr --out-dir generated ./src/svgs/ && cp src/svgr.ts generated && echo \"export type { SVGRProps } from './svgr';\" >> generated/index.ts",
     "build:tsc": "tsc --build tsconfig.build.json",
-    "build:styles": "cp src/animations.css dist/animations.css",
+    "build:styles": "cp src/animations.css src/rtl.css dist/",
     "build": "pnpm run clean && pnpm run build:icons && pnpm run build:tsc && pnpm run build:styles",
     "prepublishOnly": "pnpm run build",
     "storybook": "pnpm run build && storybook dev -p 6006",