{"_rev":"4-a3ccfa00f0de5381dbaffce0fdd05ce5","time":{"created":"2025-10-29T00:03:47.587Z","modified":"2025-10-29T00:03:48.257Z","4.29.2":"2025-10-28T23:56:08.697Z","4.29.3":"2025-10-29T00:03:47.914Z"},"_id":"@121digital/feather-icons","name":"@121digital/feather-icons","dist-tags":{"latest":"4.29.3"},"versions":{"4.29.3":{"name":"@121digital/feather-icons","version":"4.29.3","description":"Mirror of Feather Icons - Simply beautiful open source icons","repository":{"type":"git","url":"git+https://github.com/feathericons/feather.git"},"author":{"name":"Cole Bemis","email":"cole@colebemis.com","url":"https://colebemis.com"},"license":"MIT","main":"dist/feather.js","unpkg":"dist/feather.min.js","scripts":{"setup":"./bin/setup.sh","build":"./bin/build.sh","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","lint":"eslint .","format":"prettier --write .","optimize-svgs":"babel-node bin/optimize-svgs.js","release":"yarn build && changeset publish"},"jest":{"collectCoverageFrom":["src/**/*.js"]},"dependencies":{"classnames":"^2.2.5","core-js":"^3.1.3"},"devDependencies":{"@changesets/changelog-github":"^0.4.8","@changesets/cli":"^2.26.2","babel-cli":"^6.24.1","babel-loader":"^7.1.1","babel-preset-env":"^1.7.0","babel-preset-stage-2":"^6.24.1","cheerio":"^1.0.0-rc.2","eslint":"^8.47.0","html-minifier":"^3.5.8","jest":"^22.4.4","prettier":"^2.8.8","svgo":"^0.7.2","webpack":"^4.8.3","webpack-cli":"^2.1.3"},"prettier":{"singleQuote":true,"trailingComma":"all","arrowParens":"avoid"},"_id":"@121digital/feather-icons@4.29.3","bugs":{"url":"https://github.com/feathericons/feather/issues"},"homepage":"https://github.com/feathericons/feather#readme","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-l4/YDpQYCCwsC8iYox9WVnGP4BnsosWJ4zeSMKXQCVZXCcvngaX8cST7VSmdJc3cW5lNNKXLOr8i9+OX4iDmnQ==","shasum":"809bed83df4653eb6f4e39c5f94f8abcabdadf4f","tarball":"https://registry.npmjs.org/@121digital/feather-icons/-/feather-icons-4.29.3.tgz","fileCount":296,"unpackedSize":625307,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFREBQmOVmjAovE5wOcLmHyh3IWrrJjWd3gdpikJMM7PAiAJuTuhy1sxXXKCCSnuwwuNik3gPa77sCkmm7hXoMtavw=="}]},"_npmUser":{"name":"121_jgibbons","email":"jgibbons@121digital.co.uk"},"directories":{},"maintainers":[{"name":"121_jgibbons","email":"jgibbons@121digital.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/feather-icons_4.29.3_1761696227693_0.13635694937180798"},"_hasShrinkwrap":false}},"maintainers":[{"name":"121_jgibbons","email":"jgibbons@121digital.co.uk"}],"description":"Mirror of Feather Icons - Simply beautiful open source icons","homepage":"https://github.com/feathericons/feather#readme","repository":{"type":"git","url":"git+https://github.com/feathericons/feather.git"},"author":{"name":"Cole Bemis","email":"cole@colebemis.com","url":"https://colebemis.com"},"bugs":{"url":"https://github.com/feathericons/feather/issues"},"license":"MIT","readme":"# Feather\n\n[![Coverage](https://img.shields.io/codecov/c/github/feathericons/feather/master.svg?style=flat-square)](https://codecov.io/gh/feathericons/feather)\n[![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)\n[![npm version](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons)\n[![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons)\n\n## What is Feather?\n\nFeather is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.\n\nhttps://feathericons.com\n\n```shell\nnpm install feather-icons\n```\n\n## Table of contents\n\n- [Quick start](#quick-start)\n- [Usage](#usage)\n  - [Client-side JavaScript](#client-side-javascript)\n  - [Node](#node)\n  - [SVG sprite](#svg-sprite)\n  - [Figma](#figma)\n- [API reference](#api-reference)\n  - [`feather.icons`](#feathericons)\n  - [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs)\n  - [`feather.replace()`](#featherreplaceattrs)\n  - [`feather.toSvg()` (DEPRECATED) ](#feathertosvgname-attrs-deprecated)\n- [Contributing](#contributing)\n- [Related projects](#related-projects)\n- [License](#license)\n\n## Quick start\n\nStart with this [CodePen Template](https://codepen.io/pen?template=WOJZdM) to begin prototyping with Feather in the browser.\n\nOr copy and paste the following code snippet into a blank `html` file.\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <title></title>\n  <script src=\"https://unpkg.com/feather-icons\"></script>\n  <body>\n    <!-- example icon -->\n    <i data-feather=\"circle\"></i>\n\n    <script>\n      feather.replace();\n    </script>\n  </body>\n</html>\n```\n\n## Usage\n\nAt its core, Feather is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)\n\nThe following are additional ways you can use Feather.\n\n### Client-side JavaScript\n\n#### 1. Install\n\n> [!NOTE]\n> If you intend to use Feather with a CDN, you can skip this installation step.\n\nInstall with [npm](https://docs.npmjs.com/getting-started/what-is-npm).\n\n```shell\nnpm install feather-icons --save\n```\n\nOr just copy [`feather.js`](https://unpkg.com/feather-icons/dist/feather.js) or [`feather.min.js`](https://unpkg.com/feather-icons/dist/feather.min.js) into your project directory. You don't need both `feather.js` and `feather.min.js`.\n\n#### 2. Include\n\nInclude `feather.js` or `feather.min.js` with a `<script>` tag:\n\n```html\n<script src=\"path/to/dist/feather.js\"></script>\n```\n\n> [!NOTE] > `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package.\n\nOr load the script from a CDN provider:\n\n```html\n<!-- choose one -->\n<script src=\"https://unpkg.com/feather-icons\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js\"></script>\n```\n\nAfter including the script, `feather` will be available as a global variable.\n\n#### 3. Use\n\nTo use an icon on your page, add a `data-feather` attribute with the icon name to an element:\n\n```html\n<i data-feather=\"circle\"></i>\n```\n\nSee the complete list of icons at [feathericons.com](https://feathericons.com).\n\n#### 4. Replace\n\nCall the `feather.replace()` method:\n\n```html\n<script>\n  feather.replace();\n</script>\n```\n\nAll elements that have a `data-feather` attribute will be replaced with SVG markup corresponding to their `data-feather` attribute value. See the [API Reference](#api-reference) for more information about `feather.replace()`.\n\n### Node\n\n#### 1. Install\n\nInstall with [npm](https://docs.npmjs.com/getting-started/what-is-npm):\n\n```shell\nnpm install feather-icons --save\n```\n\n#### 2. Require\n\n```js\nconst feather = require('feather-icons');\n```\n\n#### 3. Use\n\n```js\nfeather.icons.x;\n// {\n//    name: 'x',\n//    contents: '<line ... /><line ... />`,\n//    tags: ['cancel', 'close', 'delete', 'remove'],\n//    attrs: {\n//      class: 'feather feather-x',\n//      xmlns: 'http://www.w3.org/2000/svg',\n//      width: 24,\n//      height: 24,\n//      viewBox: '0 0 24 24',\n//      fill: 'none',\n//      stroke: 'currentColor',\n//      'stroke-width': 2,\n//      'stroke-linecap': 'round',\n//      'stroke-linejoin': 'round',\n//    },\n//    toSvg: [Function],\n// }\n\nfeather.icons.x.toSvg();\n// <svg class=\"feather feather-x\" ...><line ... /><line ... /></svg>\n\nfeather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });\n// <svg class=\"feather feather-x foo bar\" stroke-width=\"1\" color=\"red\" ...><line ... /><line ... /></svg>\n```\n\nSee the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object.\n\n### SVG sprite\n\n#### 1. Install\n\n> [!NOTE]\n> If you intend to use Feather with a CDN, you can skip this installation step.\n\nInstall with [npm](https://docs.npmjs.com/getting-started/what-is-npm).\n\n```shell\nnpm install feather-icons --save\n```\n\nOr just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory.\n\n#### 2. Use\n\nInclude an icon on your page with the following markup:\n\n```html\n<svg\n  width=\"24\"\n  height=\"24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <use href=\"path/to/feather-sprite.svg#circle\" />\n</svg>\n```\n\n> [!NOTE] > `circle` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com).\n\nHowever, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:\n\n```css\n.feather {\n  width: 24px;\n  height: 24px;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  fill: none;\n}\n```\n\n```html\n<svg class=\"feather\">\n  <use href=\"path/to/dist/feather-sprite.svg#circle\" />\n</svg>\n```\n\n### Figma\n\nFeather is available as a [Figma component library](https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Library). To use the components, log in to your Figma account and **duplicate** the file to your drafts.\n\n## API reference\n\n### `feather.icons`\n\nAn object with data about every icon.\n\n#### Usage\n\n```js\nfeather.icons.x;\n// {\n//    name: 'x',\n//    contents: '<line ... /><line ... />',\n//    tags: ['cancel', 'close', 'delete', 'remove'],\n//    attrs: {\n//      class: 'feather feather-x',\n//      xmlns: 'http://www.w3.org/2000/svg',\n//      width: 24,\n//      height: 24,\n//      viewBox: '0 0 24 24',\n//      fill: 'none',\n//      stroke: 'currentColor',\n//      'stroke-width': 2,\n//      'stroke-linecap': 'round',\n//      'stroke-linejoin': 'round',\n//    },\n//    toSvg: [Function],\n// }\n\nfeather.icons.x.toString();\n// '<line ... /><line ... />'\n```\n\n> [!NOTE] > `x` in the above example can be replaced with any valid icon name. See the complete list of icon names at [feathericons.com](https://feathericons.com). Icons with multi-word names (e.g. `arrow-right`) **cannot** be accessed using dot notation (e.g. `feather.icons.x`). Instead, use bracket notation (e.g. `feather.icons['arrow-right']`).\n\n[View Source](https://github.com/feathericons/feather/blob/master/src/icons.js)\n\n---\n\n### `feather.icons[name].toSvg([attrs])`\n\nReturns an SVG string.\n\n#### Parameters\n\n| Name               | Type   | Description                                                                                                                                                                                                                  |\n| ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo=\"bar\"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |\n\n> [!NOTE]\n> You might find these SVG attributes helpful for manipulating icons:\n>\n> - [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)\n> - [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)\n> - [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)\n> - [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)\n> - [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)\n> - [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)\n\n#### Usage\n\n```js\nfeather.icons.circle.toSvg();\n// '<svg class=\"feather feather-circle\" 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=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n\nfeather.icons.circle.toSvg({ 'stroke-width': 1 });\n// '<svg class=\"feather feather-circle\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n\nfeather.icons.circle.toSvg({ class: 'foo bar' });\n// '<svg class=\"feather feather-circle foo bar\" 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=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n```\n\n[View Source](https://github.com/feathericons/feather/blob/master/src/icon.js)\n\n---\n\n### `feather.replace([attrs])`\n\nReplaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value.\n\n#### Parameters\n\n| Name               | Type   | Description                                                                                                                                                                                                                  |\n| ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo=\"bar\"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |\n\n#### Usage\n\n> [!IMPORTANT] > `feather.replace()` only works in a browser environment.\n\nSimple usage:\n\n```html\n<i data-feather=\"circle\"></i>\n<!--\n<i> will be replaced with:\n<svg class=\"feather feather-circle\" 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=\"12\" cy=\"12\" r=\"10\"></circle></svg>\n-->\n\n<script>\n  feather.replace();\n</script>\n```\n\nYou can pass `feather.replace()` an `attrs` object:\n\n```html\n<i data-feather=\"circle\"></i>\n<!--\n<i> will be replaced with:\n<svg class=\"feather feather-circle foo bar\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle></svg>\n-->\n\n<script>\n  feather.replace({ class: 'foo bar', 'stroke-width': 1 });\n</script>\n```\n\nAll attributes on the placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:\n\n```html\n<i data-feather=\"circle\" id=\"my-circle\" class=\"foo bar\" stroke-width=\"1\"></i>\n<!--\n<i> will be replaced with:\n<svg id=\"my-circle\" class=\"feather feather-circle foo bar\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle></svg>\n-->\n\n<script>\n  feather.replace();\n</script>\n```\n\n[View Source](https://github.com/feathericons/feather/blob/master/src/replace.js)\n\n---\n\n### `feather.toSvg(name, [attrs])` (DEPRECATED)\n\n> [!WARNING] > `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead.\n\nReturns an SVG string.\n\n#### Parameters\n\n| Name               | Type   | Description                                                                                                                                                                                                                  |\n| ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `name`             | string | Icon name                                                                                                                                                                                                                    |\n| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `<svg>` tag (e.g. `{ foo: 'bar' }` maps to `foo=\"bar\"`). All default attributes on the `<svg>` tag can be overridden with the `attrs` object. |\n\n#### Usage\n\n```js\nfeather.toSvg('circle');\n// '<svg class=\"feather feather-circle\" 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=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n\nfeather.toSvg('circle', { 'stroke-width': 1 });\n// '<svg class=\"feather feather-circle\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n\nfeather.toSvg('circle', { class: 'foo bar' });\n// '<svg class=\"feather feather-circle foo bar\" 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=\"12\" cy=\"12\" r=\"10\"></circle></svg>'\n```\n\n[View Source](https://github.com/feathericons/feather/blob/master/src/to-svg.js)\n\n## Contributing\n\nFor more info on how to contribute please see the [contribution guidelines](https://github.com/feathericons/feather/blob/master/CONTRIBUTING.md).\n\nCaught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/feathericons/feather/blob/master/README.md)\n\n## Related projects\n\n- [feathericons.dev](http://feathericons.dev) - Feather viewer featuring [30+ brand icons](https://feathericons.dev/?iconset=brands) and [40+ payment services icons](https://feathericons.dev/?iconset=payments)\n- [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications\n- [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications\n- [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components\n- [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library\n- [vue-feather-icons](https://github.com/egoist/vue-feather-icons) - Feather icons as Vue components\n- [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library\n- [wp-php-feather](https://github.com/reatlat/wp-php-feather) - Feather icons as a WordPress template tag\n- [django-feather](https://pypi.org/project/django-feather/) - Feather icons as Django Template Tag\n- [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) - Feather icons as Svelte components\n- [gulp-feather](https://github.com/oToToT/gulp-feather) - Feather icons rendering using gulp\n- [astro-feather](https://github.com/gabrlyg/astro-feather) - Feather icons as Astro components\n- [qwik-feather-icons](https://github.com/yeyon/qwik-feather-icons) - Feather icons for Qwik, the Resumable Framework\n- [figma-feather](https://github.com/kevintoepfer/figma-feather) – Feather icons as a Figma component\n- [delphi-feather-icons](https://github.com/shaunroselt/Delphi-Feather-Icons) - Feather icons as a Delphi Library\n- [eleventy-plugin-feathericons](https://github.com/reatlat/eleventy-plugin-feathericons) - Feather icons as a plugin for [11ty](https://github.com/11ty/eleventy)\n\n## License\n\nFeather is licensed under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE).\n","readmeFilename":"README.md"}