Add alternative arrow icons (#1227)

* add move-left icon

* add move-right icon

* add move-down-left icon

* add move-down-right icon

* add move-down icon

* add move-up-right icon

* add move-up-left icon

* add move-up icon

* fix formatting

docs/comparison.md

@@ -6,20 +6,20 @@ title: Comparison
 
 ## Lucide vs Feather Icons
 
-Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
+Lucide is a community-driven fork of [Feather Icons](https://github.com/feathericons/feather).
 
-It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned and not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+The decision to create Lucide arose from growing dissatisfaction with the moderation of the Feather Icons project. With more than 300 open issues and over 100 open PRs, the Feather Icons project has been abandoned and is no longer actively maintained. Unfortunately, this means that numerous developers and designers have invested their time in contributing to Feather Icons without the possibility of their PRs being accepted.
 
-Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers.
+In an effort to expand the icon set while remaining true to the original minimalist design language, Lucide is driven by a community of developers and designers. We strive to grow together and maintain a faithful continuation of the project.
 
 ### Why should I choose Lucide over Feather Icons?
 
-- Lucide already expended the icon set by 130+ in less then a year. Lucide has over 500+ icon, feather sticks around 286 icons.
+- Lucide has expanded its icon set by 500+ in the last few years. Lucide now has over 1000 icons, while Feather has around 287 icons.
 - Well maintained code base.
 - Active community.
 
 ### Should I migrate to Lucide?
 
-That depends if you're fine with the icons from feather icons. If that is the case, it is maybe not the effort worth it.
-But if you keep wrestling and feel limited by the icons Feather provides you can consider to migrate.
-We didn't remove any icons when we forked, but there are some icons renamed.
+That depends on whether you're satisfied with the icons from Feather Icons. If that is the case, it may not be worth the effort.
+However, if you find yourself struggling and feeling limited by the icons provided by Feather, you can consider migrating.
+When we forked, we didn't remove any icons, but some icons have been renamed.

icons/move-down-left.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-down-left.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 19H5V13" />
+  <path d="M19 5L5 19" />
+</svg>

icons/move-down-right.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-down-right.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 13V19H13" />
+  <path d="M5 5L19 19" />
+</svg>

icons/move-down.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction",
+    "downwards",
+    "south"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-down.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 18L12 22L16 18" />
+  <path d="M12 2V22" />
+</svg>

icons/move-left.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction",
+    "back",
+    "west"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-left.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 8L2 12L6 16" />
+  <path d="M2 12H22" />
+</svg>

icons/move-right.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction",
+    "trend flat",
+    "east"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-right.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 8L22 12L18 16" />
+  <path d="M2 12H22" />
+</svg>

icons/move-up-left.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-up-left.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 11V5H11" />
+  <path d="M5 5L19 19" />
+</svg>

icons/move-up-right.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-up-right.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M13 5H19V11" />
+  <path d="M19 5L5 19" />
+</svg>

icons/move-up.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "direction",
+    "upwards",
+    "north"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/move-up.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 6L12 2L16 6" />
+  <path d="M12 2V22" />
+</svg>

icons/pilcrow-square.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "paragraph",
+    "mark",
+    "paraph",
+    "blind",
+    "typography",
+    "type",
+    "text",
+    "prose",
+    "symbol"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/pilcrow-square.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M12 12H9.5a2.5 2.5 0 0 1 0-5H17" />
+  <path d="M12 7v10" />
+  <path d="M16 7v10" />
+</svg>

icons/pilcrow.json

@@ -7,7 +7,9 @@
     "blind",
     "typography",
     "type",
-    "text"
+    "text",
+    "prose",
+    "symbol"
   ],
   "categories": [
     "text"

icons/scatter-chart.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "statistics",
+    "diagram",
+    "graph"
+  ],
+  "categories": [
+    "charts"
+  ]
+}

icons/scatter-chart.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="7.5" cy="7.5" r=".5" />
+  <circle cx="18.5" cy="5.5" r=".5" />
+  <circle cx="11.5" cy="11.5" r=".5" />
+  <circle cx="7.5" cy="16.5" r=".5" />
+  <circle cx="17.5" cy="14.5" r=".5" />
+  <path d="M3 3v18h18" />
+</svg>

icons/ticket.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M3 7v2a3 3 0 1 1 0 6v2c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
+  <path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />
   <path d="M13 5v2" />
   <path d="M13 17v2" />
   <path d="M13 11v2" />

packages/lucide/README.md

@@ -35,9 +35,9 @@ Here is a complete example with unpkg
 ```html
 <!DOCTYPE html>
 <body>
-  <i icon-name="volume-2" class="my-class"></i>
-  <i icon-name="x"></i>
-  <i icon-name="menu"></i>
+  <i data-lucide="volume-2" class="my-class"></i>
+  <i data-lucide="x"></i>
+  <i data-lucide="menu"></i>
 
   <script src="https://unpkg.com/lucide@latest"></script>
   <script>
@@ -49,11 +49,11 @@ Here is a complete example with unpkg
 ### With ESModules
 
 To reduce bundle size, lucide is built to be fully tree-shakable.
-The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
+The `createIcons` function will search for HTMLElements with the attribute `data-lucide` and replace it with the svg from the given icon name.
 
 ```html
 <!-- Your HTML file -->
-<i icon-name="menu"></i>
+<i data-lucide="menu"></i>
 ```
 
 ```js
@@ -89,7 +89,7 @@ createIcons({
     'stroke-width': 1,
     stroke: '#333'
   },
-  nameAttr: 'icon-name' // attribute for the icon name.
+  nameAttr: 'data-lucide' // attribute for the icon name.
 });
 ```
 

packages/lucide/scripts/buildTypes.mjs

@@ -50,9 +50,9 @@ export interface CreateIconsOptions {
   /**
    * Search HTML emelemt by \`nameAttr\` property.
    *
-   * For example if define \`<i lucide-icon="circle"></i>\`, fill by \`lucide-icon\`.
+   * For example if define \`<i data-lucide="circle"></i>\`, fill by \`data-lucide\`.
    *
-   * @default 'icon-name'
+   * @default 'data-lucide'
    */
   nameAttr?: string;
 

packages/lucide/src/lucide.ts

@@ -5,7 +5,7 @@ import * as allIcons from './icons';
  * Replaces all elements with matching nameAttr with the defined icons
  * @param {{ icons?: object, nameAttr?: string, attrs?: object }} options
  */
-const createIcons = ({ icons = {}, nameAttr = 'icon-name', attrs = {} } = {}) => {
+const createIcons = ({ icons = {}, nameAttr = 'data-lucide', attrs = {} } = {}) => {
   if (!Object.values(icons).length) {
     throw new Error(
       "Please provide an icons object.\nIf you want to use all the icons you can import it like:\n `import { createIcons, icons } from 'lucide';\nlucide.createIcons({icons});`",
@@ -17,10 +17,20 @@ const createIcons = ({ icons = {}, nameAttr = 'icon-name', attrs = {} } = {}) =>
   }
 
   const elementsToReplace = document.querySelectorAll(`[${nameAttr}]`);
-
   Array.from(elementsToReplace).forEach((element) =>
     replaceElement(element, { nameAttr, icons, attrs }),
   );
+
+  /** @todo: remove this block in v1.0 */
+  if (nameAttr === 'data-lucide') {
+    const deprecatedElements = document.querySelectorAll('[icon-name]');
+    if (deprecatedElements.length > 0) {
+      console.warn('[Lucide] Some icons were found with the now deprecated icon-name attribute. These will still be replaced for backwards compatibility, but will no longer be supported in v1.0 and you should switch to data-lucide');
+      Array.from(deprecatedElements).forEach((element) =>
+        replaceElement(element, { nameAttr: 'icon-name', icons, attrs }),
+      );
+    }
+  }
 };
 
 export { createIcons };

packages/lucide/src/replaceElement.ts

@@ -83,7 +83,7 @@ const replaceElement = (element: Element, { nameAttr, icons, attrs }: ReplaceEle
 
   const iconAttrs = {
     ...iconAttributes,
-    'icon-name': iconName,
+    'data-lucide': iconName,
     ...attrs,
     ...elementAttrs,
   };

packages/lucide/tests/__snapshots__/lucide.spec.js.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1
 
-exports[`createIcons > should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
+exports[`createIcons > should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-lucide=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
 
-exports[`createIcons > should read elements from DOM and replace it with icons 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
+exports[`createIcons > should read elements from DOM and replace it with icons 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-lucide=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;

packages/lucide/tests/lucide.spec.js

@@ -11,7 +11,7 @@ const getOriginalSvg = (iconName) => {
   const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8');
   const svgParsed = parseSync(svgContent);
 
-  svgParsed.attributes['icon-name'] = iconName;
+  svgParsed.attributes['data-lucide'] = iconName;
   svgParsed.attributes['class'] = `lucide lucide-${iconName}`;
 
   return stringify(svgParsed, { selfClose: false });
@@ -19,7 +19,7 @@ const getOriginalSvg = (iconName) => {
 
 describe('createIcons', () => {
   it('should read elements from DOM and replace it with icons', () => {
-    document.body.innerHTML = `<i icon-name="volume-2"></i>`;
+    document.body.innerHTML = `<i data-lucide="volume-2"></i>`;
 
     createIcons({icons});
 
@@ -30,11 +30,11 @@ describe('createIcons', () => {
   });
 
   it('should customize the name attribute', () => {
-    document.body.innerHTML = `<i custom-name="volume-2"></i>`;
+    document.body.innerHTML = `<i data-custom-name="volume-2"></i>`;
 
     createIcons({
       icons,
-      nameAttr: 'custom-name'
+      nameAttr: 'data-custom-name'
     });
 
     const hasSvg = !!document.querySelector('svg');
@@ -43,7 +43,7 @@ describe('createIcons', () => {
   });
 
   it('should add custom attributes', () => {
-    document.body.innerHTML = `<i icon-name="volume-2" class="lucide"></i>`;
+    document.body.innerHTML = `<i data-lucide="volume-2" class="lucide"></i>`;
 
     const attrs = {
       class: 'lucide lucide-volume-2 icon custom-class',
@@ -67,7 +67,7 @@ describe('createIcons', () => {
   });
 
   it('should inherit elements attributes', () => {
-    document.body.innerHTML = `<i icon-name="sun" data-theme-switcher="light"></i>`;
+    document.body.innerHTML = `<i data-lucide="sun" data-theme-switcher="light"></i>`;
 
     const attrs = {
       'data-theme-switcher':'light',