Repository: feathericons/feather Branch: main Commit: 3dc050d97405 Files: 56 Total size: 63.7 KB Directory structure: gitextract_6lb9fqmi/ ├── .babelrc ├── .changeset/ │ ├── README.md │ └── config.json ├── .eslintignore ├── .eslintrc.js ├── .github/ │ ├── CODEOWNERS │ ├── ISSUE_TEMPLATE/ │ │ ├── 01-icon-request.yml │ │ └── 02-bug-report.yml │ └── workflows/ │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .lintstagedrc ├── .prettierignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bin/ │ ├── .eslintrc.json │ ├── __tests__/ │ │ ├── __snapshots__/ │ │ │ ├── build-icons-object.test.js.snap │ │ │ ├── build-sprite-string.test.js.snap │ │ │ └── optimize-svg.test.js.snap │ │ ├── build-icons-object.test.js │ │ ├── build-sprite-string.test.js │ │ └── optimize-svg.test.js │ ├── build-icons-json.js │ ├── build-icons-object.js │ ├── build-sprite-string.js │ ├── build-sprite.js │ ├── build-svgs.js │ ├── build.sh │ ├── optimize-svg.js │ ├── optimize-svgs.js │ └── setup.sh ├── commitlint.config.js ├── examples/ │ └── index.html ├── package.json ├── src/ │ ├── __tests__/ │ │ ├── __snapshots__/ │ │ │ ├── icon.test.js.snap │ │ │ ├── icons.test.js.snap │ │ │ ├── replace.node.test.js.snap │ │ │ ├── replace.test.js.snap │ │ │ └── to-svg.test.js.snap │ │ ├── icon.test.js │ │ ├── icons.test.js │ │ ├── index.test.js │ │ ├── replace.node.test.js │ │ ├── replace.test.js │ │ └── to-svg.test.js │ ├── default-attrs.json │ ├── icon.js │ ├── icons.js │ ├── index.js │ ├── replace.js │ ├── tags.json │ └── to-svg.js └── webpack.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions"] } } ], "stage-2" ] } ================================================ FILE: .changeset/README.md ================================================ # Changesets Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with mono-repos or single package repos to help you version and release your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets) We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) ================================================ FILE: .changeset/config.json ================================================ { "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json", "changelog": [ "@changesets/changelog-github", { "repo": "feathericons/feather" } ], "commit": false, "fixed": [], "linked": [], "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", "ignore": [] } ================================================ FILE: .eslintignore ================================================ dist coverage ================================================ FILE: .eslintrc.js ================================================ module.exports = { env: { browser: true, es2021: true, node: true, }, extends: 'eslint:recommended', overrides: [ { env: { node: true, }, files: ['.eslintrc.{js,cjs}'], parserOptions: { sourceType: 'script', }, }, ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, rules: {}, }; ================================================ FILE: .github/CODEOWNERS ================================================ * @colebemis ================================================ FILE: .github/ISSUE_TEMPLATE/01-icon-request.yml ================================================ name: 🙏 Icon request description: Request a new icon title: 'Icon request: ' labels: ['icon request'] projects: ['feathericons/1'] body: - type: input id: icon-name attributes: label: Icon name placeholder: e.g. star validations: required: true - type: textarea id: use-case attributes: label: Use case description: Please describe your use case for the requested icon. placeholder: e.g. I need a star icon to use in my rating system. validations: required: true - type: textarea id: screenshots attributes: label: Screenshots of similar icons description: Please attach screenshots of similar icons from other icon sets to help us visualize your request. placeholder: e.g. ![Screenshot of similar icon](https://example.com/screenshot.png) validations: required: true - type: checkboxes id: checklist attributes: label: Checklist description: Please check the following items before submitting your request. options: - label: I have searched the existing icons to make sure this icon does not already exist. required: true - label: I have searched the existing issues to make sure this icon has not already been requested. required: true - label: This icon is not a logo. required: true ================================================ FILE: .github/ISSUE_TEMPLATE/02-bug-report.yml ================================================ name: 🐛 Bug report description: Report a bug title: 'Bug: ' labels: ['bug'] projects: ['feathericons/1'] body: - type: textarea id: description attributes: label: Description description: "Tell us more about the problem that you're running into." placeholder: 'e.g. When I try to do X, Y happens instead of Z' validations: required: true - type: textarea id: reproduce attributes: label: Steps to reproduce description: 'How can we reproduce the error you described above? Please provide a link to a live example, or steps to reproduce locally.' placeholder: | 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error validations: required: true - type: input id: version attributes: label: Version description: 'What version of `feather-icons` are you using?' placeholder: e.g. v4.29.0 validations: required: false - type: dropdown id: browser attributes: label: Browser description: In which browser(s) are you experiencing the issue? multiple: true options: - Chrome - Safari - Firefox - Edge - iOS Safari - Other validations: required: false - type: dropdown id: os attributes: label: Operating system description: On which operating system(s) are you experiencing the issue? multiple: true options: - macOS - Windows - Linux - iOS - Android - Other validations: required: false - type: checkboxes id: checklist attributes: label: Checklist description: Please check the following items before submitting your issue. options: - label: I have searched the existing issues to make sure this bug has not already been reported. required: true ================================================ FILE: .github/workflows/ci.yml ================================================ name: CI on: push jobs: ci: name: CI runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v3 - name: Setup Node.js 16.x uses: actions/setup-node@v3 with: node-version: 16.x cache: 'npm' - name: Install dependencies run: npm ci --legacy-peer-deps - name: Build run: npm run build - name: Test run: npm run test:coverage - name: Lint run: npm run lint - name: Optimize SVGs run: | npm run optimize-svgs if git diff --quiet; then echo "All SVGs are optimized ✔︎" else echo "The following SVGs are not optimized:" git diff --name-only echo echo "Please run 'npm run optimize-svgs' and commit the changes" exit 1 fi ================================================ FILE: .github/workflows/release.yml ================================================ name: Release on: push: branches: - main concurrency: ${{ github.workflow }}-${{ github.ref }} jobs: release: name: Release runs-on: ubuntu-latest steps: - name: Checkout repository uses: actions/checkout@v3 - name: Setup Node.js 16.x uses: actions/setup-node@v3 with: node-version: 16.x cache: 'npm' - name: Install dependencies run: npm ci --legacy-peer-deps - name: Create release pull request or publish to npm id: changesets uses: changesets/action@v1 with: title: 'Release' publish: npm run release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} ================================================ FILE: .gitignore ================================================ .DS_Store node_modules dist sandbox stash coverage ================================================ FILE: .lintstagedrc ================================================ { "*.js": "eslint" } ================================================ FILE: .prettierignore ================================================ dist coverage ================================================ FILE: CHANGELOG.md ================================================ # feather-icons ## 4.29.2 ### Patch Changes - [#1241](https://github.com/feathericons/feather/pull/1241) [`6e449d4`](https://github.com/feathericons/feather/commit/6e449d481e7ec7568103289eb4494999843b68ce) Thanks [@braden-godley](https://github.com/braden-godley)! - Feather no longer breaks when trying to replace an icon using an invalid name ## 4.29.1 ### Patch Changes - [#1213](https://github.com/feathericons/feather/pull/1213) [`8f0cc0e`](https://github.com/feathericons/feather/commit/8f0cc0e6667e88b7de391ccaf75820a6e57f4f13) Thanks [@colebemis](https://github.com/colebemis)! - Test [changesets](https://github.com/changesets/changesets) release ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ## Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cole@colebemis.com. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: CONTRIBUTING.md ================================================ # Contribution guidelines First off, thanks for taking the time to contribute! The following is a set of guidelines for contributing to Feather. Feel free to propose changes to this document in a pull request. ## Pull requests > [!IMPORTANT] > We are not accepting pull requests containing **icons**. If you want to add a new icon, please create an [icon request](#icon-requests). Pull requests for bug fixes and improvements are welcome. If you’re not sure if something is worth doing, please open an issue first. **Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). Here are a few things you can do that will increase the likelihood of your pull request being accepted: - **Make your commit messages as descriptive as possible.** Include as much information as you can. Explain anything that might be unclear. - **Document your pull request**. Explain your changes, link to the relevant issue, and add screenshots when applicable. - **Include only related work**. If you have unrelated changes, please split them into separate pull requests. ## Icon requests To request a new icon, please fill out the [icon request form](https://github.com/feathericons/feather/issues/new?template=01-icon-request.yml). ## Bug reports To report a bug, please fill out the [bug report form](https://github.com/feathericons/feather/issues/new?template=02-bug-report.yml). ## Local development Follow these steps to set up Feather for local development: ```shell # 1. Clone the repository git clone https://github.com/feathericons/feather.git cd feather # 2. Run setup script npm run setup ``` ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2013-2023 Cole Bemis Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Feather [![Coverage](https://img.shields.io/codecov/c/github/feathericons/feather/master.svg?style=flat-square)](https://codecov.io/gh/feathericons/feather) [![npm downloads](https://img.shields.io/npm/dm/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons) [![npm version](https://img.shields.io/npm/v/feather-icons.svg?style=flat-square)](https://www.npmjs.com/package/feather-icons) [![CDNJS version](https://img.shields.io/cdnjs/v/feather-icons.svg?style=flat-square)](https://cdnjs.com/libraries/feather-icons) ## What is Feather? Feather 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. https://feathericons.com ```shell npm install feather-icons ``` ## Table of contents - [Quick start](#quick-start) - [Usage](#usage) - [Client-side JavaScript](#client-side-javascript) - [Node](#node) - [SVG sprite](#svg-sprite) - [Figma](#figma) - [API reference](#api-reference) - [`feather.icons`](#feathericons) - [`feather.icons[name].toSvg()`](#feathericonsnametosvgattrs) - [`feather.replace()`](#featherreplaceattrs) - [`feather.toSvg()` (DEPRECATED) ](#feathertosvgname-attrs-deprecated) - [Contributing](#contributing) - [Related projects](#related-projects) - [License](#license) ## Quick start Start with this [CodePen Template](https://codepen.io/pen?template=WOJZdM) to begin prototyping with Feather in the browser. Or copy and paste the following code snippet into a blank `html` file. ```html ``` ## Usage At 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) The following are additional ways you can use Feather. ### Client-side JavaScript #### 1. Install > [!NOTE] > If you intend to use Feather with a CDN, you can skip this installation step. Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm). ```shell npm install feather-icons --save ``` Or 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`. #### 2. Include Include `feather.js` or `feather.min.js` with a ` ``` > [!NOTE] > `feather.js` and `feather.min.js` are located in the `dist` directory of the npm package. Or load the script from a CDN provider: ```html ``` After including the script, `feather` will be available as a global variable. #### 3. Use To use an icon on your page, add a `data-feather` attribute with the icon name to an element: ```html ``` See the complete list of icons at [feathericons.com](https://feathericons.com). #### 4. Replace Call the `feather.replace()` method: ```html ``` All 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()`. ### Node #### 1. Install Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm): ```shell npm install feather-icons --save ``` #### 2. Require ```js const feather = require('feather-icons'); ``` #### 3. Use ```js feather.icons.x; // { // name: 'x', // contents: '`, // tags: ['cancel', 'close', 'delete', 'remove'], // attrs: { // class: 'feather feather-x', // 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', // }, // toSvg: [Function], // } feather.icons.x.toSvg(); // feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' }); // ``` See the [API Reference](#api-reference) for more information about the available properties and methods of the `feather` object. ### SVG sprite #### 1. Install > [!NOTE] > If you intend to use Feather with a CDN, you can skip this installation step. Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm). ```shell npm install feather-icons --save ``` Or just copy [`feather-sprite.svg`](https://unpkg.com/feather-icons/dist/feather-sprite.svg) into your project directory. #### 2. Use Include an icon on your page with the following markup: ```html ``` > [!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). However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons: ```css .feather { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } ``` ```html ``` ### Figma Feather 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. ## API reference ### `feather.icons` An object with data about every icon. #### Usage ```js feather.icons.x; // { // name: 'x', // contents: '', // tags: ['cancel', 'close', 'delete', 'remove'], // attrs: { // class: 'feather feather-x', // 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', // }, // toSvg: [Function], // } feather.icons.x.toString(); // '' ``` > [!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']`). [View Source](https://github.com/feathericons/feather/blob/master/src/icons.js) --- ### `feather.icons[name].toSvg([attrs])` Returns an SVG string. #### Parameters | Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. | > [!NOTE] > You might find these SVG attributes helpful for manipulating icons: > > - [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color) > - [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width) > - [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height) > - [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) > - [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap) > - [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin) #### Usage ```js feather.icons.circle.toSvg(); // '' feather.icons.circle.toSvg({ 'stroke-width': 1 }); // '' feather.icons.circle.toSvg({ class: 'foo bar' }); // '' ``` [View Source](https://github.com/feathericons/feather/blob/master/src/icon.js) --- ### `feather.replace([attrs])` Replaces all elements that have a `data-feather` attribute with SVG markup corresponding to the element's `data-feather` attribute value. #### Parameters | Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. | #### Usage > [!IMPORTANT] > `feather.replace()` only works in a browser environment. Simple usage: ```html ``` You can pass `feather.replace()` an `attrs` object: ```html ``` All attributes on the placeholder element (i.e. ``) will be copied to the `` tag: ```html ``` [View Source](https://github.com/feathericons/feather/blob/master/src/replace.js) --- ### `feather.toSvg(name, [attrs])` (DEPRECATED) > [!WARNING] > `feather.toSvg()` is deprecated. Please use `feather.icons[name].toSvg()` instead. Returns an SVG string. #### Parameters | Name | Type | Description | | ------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | string | Icon name | | `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. | #### Usage ```js feather.toSvg('circle'); // '' feather.toSvg('circle', { 'stroke-width': 1 }); // '' feather.toSvg('circle', { class: 'foo bar' }); // '' ``` [View Source](https://github.com/feathericons/feather/blob/master/src/to-svg.js) ## Contributing For more info on how to contribute please see the [contribution guidelines](https://github.com/feathericons/feather/blob/master/CONTRIBUTING.md). Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/feathericons/feather/blob/master/README.md) ## Related projects - [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) - [angular-feather](https://github.com/michaelbazos/angular-feather) - Feather icons for Angular applications - [elm-feather](https://github.com/1602/elm-feather) - Feather icons for Elm applications - [react-feather](https://github.com/carmelopullara/react-feather) - Feather icons as React components - [sketch-feather](https://github.com/odmln/sketch-feather) - Feather icons as a Sketch library - [vue-feather-icons](https://github.com/egoist/vue-feather-icons) - Feather icons as Vue components - [php-feather](https://github.com/Pixelrobin/php-feather) - Feather icons as a PHP Library - [hyva-feather](https://github.com/Siteation/magento2-hyva-icons-feather) - Feather icons as a Magento 2 Hyva template tag - [wp-php-feather](https://github.com/reatlat/wp-php-feather) - Feather icons as a WordPress template tag - [django-feather](https://pypi.org/project/django-feather/) - Feather icons as Django Template Tag - [svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) - Feather icons as Svelte components - [gulp-feather](https://github.com/oToToT/gulp-feather) - Feather icons rendering using gulp - [astro-feather](https://github.com/gabrlyg/astro-feather) - Feather icons as Astro components - [qwik-feather-icons](https://github.com/yeyon/qwik-feather-icons) - Feather icons for Qwik, the Resumable Framework - [figma-feather](https://github.com/kevintoepfer/figma-feather) – Feather icons as a Figma component - [delphi-feather-icons](https://github.com/shaunroselt/Delphi-Feather-Icons) - Feather icons as a Delphi Library - [eleventy-plugin-feathericons](https://github.com/reatlat/eleventy-plugin-feathericons) - Feather icons as a plugin for [11ty](https://github.com/11ty/eleventy) ## License Feather is licensed under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE). ================================================ FILE: bin/.eslintrc.json ================================================ { "rules": { "import/no-extraneous-dependencies": "off", "no-console": "off" } } ================================================ FILE: bin/__tests__/__snapshots__/build-icons-object.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`builds object correctly 1`] = ` Object { "icon1": "", "icon2": "", } `; ================================================ FILE: bin/__tests__/__snapshots__/build-sprite-string.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`builds sprite correctly 1`] = `""`; ================================================ FILE: bin/__tests__/__snapshots__/optimize-svg.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`optimizes SVG correctly 1`] = `""`; exports[`rejects when passed unparsable SVG string 1`] = ` [Error: Error in parsing SVG: Unclosed root tag Line: 0 Column: 10 Char: ] `; ================================================ FILE: bin/__tests__/build-icons-object.test.js ================================================ /* eslint-env jest */ import buildIconsObject from '../build-icons-object'; const SVG_FILES = { 'icon1.svg': '\n \n \n', 'icon2.svg': '\n \n', }; function getSvg(svgFile) { return SVG_FILES[svgFile]; } test('builds object correctly', () => { expect(buildIconsObject(Object.keys(SVG_FILES), getSvg)).toMatchSnapshot(); }); ================================================ FILE: bin/__tests__/build-sprite-string.test.js ================================================ /* eslint-env jest */ import buildSpriteString from '../build-sprite-string'; const icons = { icon1: '', icon2: '', }; test('builds sprite correctly', () => { expect(buildSpriteString(icons)).toMatchSnapshot(); }); ================================================ FILE: bin/__tests__/optimize-svg.test.js ================================================ /* eslint-env jest */ import optimizeSvg from '../optimize-svg'; test('optimizes SVG correctly', () => { const SVG = 'Title'; expect(optimizeSvg(SVG)).resolves.toMatchSnapshot(); }); test('rejects when passed unparsable SVG string', () => { const UNPARSABLE_SVG = ' path.extname(file) === '.svg'); const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile)); const icons = buildIconsObject(svgFiles, getSvg); fs.writeFileSync(OUT_FILE, JSON.stringify(icons)); ================================================ FILE: bin/build-icons-object.js ================================================ import path from 'path'; import cheerio from 'cheerio'; import { minify } from 'html-minifier'; /** * Build an object in the format: `{ : }`. * @param {string[]} svgFiles - A list of filenames. * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename. * @returns {Object} */ function buildIconsObject(svgFiles, getSvg) { return svgFiles .map(svgFile => { const name = path.basename(svgFile, '.svg'); const svg = getSvg(svgFile); const contents = getSvgContents(svg); return { name, contents }; }) .reduce((icons, icon) => { icons[icon.name] = icon.contents; return icons; }, {}); } /** * Get contents between opening and closing `` tags. * @param {string} svg * @returns {string} */ function getSvgContents(svg) { const $ = cheerio.load(svg); return minify($('svg').html(), { collapseWhitespace: true }); } export default buildIconsObject; ================================================ FILE: bin/build-sprite-string.js ================================================ import DEFAULT_ATTRS from '../src/default-attrs.json'; /** * Build an SVG sprite string containing SVG symbols. * @param {Object} icons * @returns {string} */ function buildSpriteString(icons) { const symbols = Object.keys(icons) .map(icon => toSvgSymbol(icon, icons[icon])) .join(''); return `${symbols}`; } /** * Create an SVG symbol string. * @param {string} name - Icon name * @param {string} contents - SVG contents * @returns {string} */ function toSvgSymbol(name, contents) { return `${contents}`; } export default buildSpriteString; ================================================ FILE: bin/build-sprite.js ================================================ import fs from 'fs'; import path from 'path'; import icons from '../dist/icons.json'; import buildSpriteString from './build-sprite-string'; const OUT_FILE = path.resolve(__dirname, '../dist/feather-sprite.svg'); console.log(`Building ${OUT_FILE}...`); fs.writeFileSync(OUT_FILE, buildSpriteString(icons)); ================================================ FILE: bin/build-svgs.js ================================================ import fs from 'fs'; import path from 'path'; import icons from '../src/icons'; const OUT_DIR = path.resolve(__dirname, '../dist/icons'); console.log(`Building SVGs in ${OUT_DIR}...`); Object.keys(icons).forEach(name => { const svg = icons[name].toSvg(); fs.writeFileSync(path.join(OUT_DIR, `${name}.svg`), svg); }); ================================================ FILE: bin/build.sh ================================================ #!/bin/bash # Create dist directory npx rimraf dist mkdir dist # Build icons.json npx babel-node bin/build-icons-json.js # Build SVG sprite npx babel-node bin/build-sprite.js # Create dist/icons directory npx rimraf dist/icons mkdir dist/icons # Build SVG icons npx babel-node bin/build-svgs.js # Build JavaScript library npx webpack --output-filename feather.js --mode development npx webpack --output-filename feather.min.js --mode production ================================================ FILE: bin/optimize-svg.js ================================================ import Svgo from 'svgo'; import cheerio from 'cheerio'; import DEFAULT_ATTRS from '../src/default-attrs.json'; /** * Optimize SVG string. * @param {string} svg - An SVG string. * @returns {Promise} */ function optimizeSvg(svg) { return svgo(svg).then(setAttrs); } /** * Run SVGO on SVG string. * @param {string} svg - An SVG string. * @returns {Promise} */ function svgo(svg) { const s = new Svgo({ plugins: [ { convertShapeToPath: false }, { mergePaths: false }, { removeAttrs: { attrs: '(fill|stroke.*)' } }, { removeTitle: true }, ], }); return new Promise(resolve => { s.optimize(svg, ({ data }) => resolve(data)); }); } /** * Set default attributes on SVG. * @param {string} svg - An SVG string. * @returns {string} */ function setAttrs(svg) { const $ = cheerio.load(svg); Object.keys(DEFAULT_ATTRS).forEach(key => $('svg').attr(key, DEFAULT_ATTRS[key]), ); return $('body').html(); } export default optimizeSvg; ================================================ FILE: bin/optimize-svgs.js ================================================ import fs from 'fs'; import path from 'path'; import optimizeSvg from './optimize-svg'; const IN_DIR = path.resolve(__dirname, '../icons'); console.log(`Optimizing SVGs in ${IN_DIR}...`); fs.readdirSync(IN_DIR) .filter(file => path.extname(file) === '.svg') .forEach(svgFile => { const svg = fs.readFileSync(path.join(IN_DIR, svgFile)); optimizeSvg(svg).then(svg => fs.writeFileSync(path.join(IN_DIR, svgFile), svg), ); }); ================================================ FILE: bin/setup.sh ================================================ #!/bin/bash npm install --legacy-peer-deps npm run build npm run test:coverage npm run lint ================================================ FILE: commitlint.config.js ================================================ module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'scope-case': [0], 'subject-case': [2, 'always', 'sentence-case'], 'header-max-length': [0], }, }; ================================================ FILE: examples/index.html ================================================ Feather ================================================ FILE: package.json ================================================ { "name": "feather-icons", "version": "4.29.2", "description": "Simply beautiful open source icons", "repository": { "type": "git", "url": "https://github.com/feathericons/feather.git" }, "author": "Cole Bemis (https://colebemis.com)", "license": "MIT", "main": "dist/feather.js", "unpkg": "dist/feather.min.js", "files": [ "dist" ], "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" } } ================================================ FILE: src/__tests__/__snapshots__/icon.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`constructs icon object correctly 1`] = ` Icon { "attrs": Object { "class": "feather feather-test", "fill": "none", "height": 24, "stroke": "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": 2, "viewBox": "0 0 24 24", "width": 24, "xmlns": "http://www.w3.org/2000/svg", }, "contents": "", "name": "test", "tags": Array [ "hello", "world", "foo", "bar", ], } `; exports[`constructs icon object correctly 2`] = ` Icon { "attrs": Object { "class": "feather feather-test", "fill": "none", "height": 24, "stroke": "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": 2, "viewBox": "0 0 24 24", "width": 24, "xmlns": "http://www.w3.org/2000/svg", }, "contents": "", "name": "test", "tags": Array [], } `; exports[`toString() returns correct string 1`] = `""`; exports[`toSvg() returns correct string 1`] = `""`; exports[`toSvg() returns correct string 2`] = `""`; exports[`toSvg() returns correct string 3`] = `""`; ================================================ FILE: src/__tests__/__snapshots__/icons.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`exports correct object 1`] = ` Object { "icon1": Icon { "attrs": Object { "class": "feather feather-icon1", "fill": "none", "height": 24, "stroke": "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": 2, "viewBox": "0 0 24 24", "width": 24, "xmlns": "http://www.w3.org/2000/svg", }, "contents": "", "name": "icon1", "tags": Array [ "foo", "bar", "hello", "world", ], }, "icon2": Icon { "attrs": Object { "class": "feather feather-icon2", "fill": "none", "height": 24, "stroke": "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": 2, "viewBox": "0 0 24 24", "width": 24, "xmlns": "http://www.w3.org/2000/svg", }, "contents": "", "name": "icon2", "tags": Array [], }, } `; ================================================ FILE: src/__tests__/__snapshots__/replace.node.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`throws an error when run in node environment 1`] = `"\`feather.replace()\` only works in a browser environment."`; ================================================ FILE: src/__tests__/__snapshots__/replace.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`copies placeholder element attributes to tag 1`] = `""`; exports[`copies placeholder element attributes to tag 2`] = `""`; exports[`replaces [data-feather] elements with SVG markup 1`] = `""`; exports[`replaces [data-feather] elements with SVG markup 2`] = `""`; exports[`sets attributes passed as parameters 1`] = `""`; exports[`sets attributes passed as parameters 2`] = `""`; ================================================ FILE: src/__tests__/__snapshots__/to-svg.test.js.snap ================================================ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`returns correct string 1`] = `""`; exports[`returns correct string 2`] = `""`; exports[`returns correct string 3`] = `""`; ================================================ FILE: src/__tests__/icon.test.js ================================================ /* eslint-env jest */ import Icon from '../icon'; const icon1 = new Icon( 'test', '', ['hello', 'world', 'foo', 'bar'], ); const icon2 = new Icon( 'test', '', ); test('constructs icon object correctly', () => { expect(icon1).toMatchSnapshot(); expect(icon2).toMatchSnapshot(); }); test('toSvg() returns correct string', () => { expect(icon1.toSvg()).toMatchSnapshot(); expect(icon1.toSvg({ 'stroke-width': 1, color: 'red' })).toMatchSnapshot(); expect(icon1.toSvg({ class: 'foo bar', color: 'red' })).toMatchSnapshot(); }); test('toString() returns correct string', () => { expect(icon1.toString()).toMatchSnapshot(); }); ================================================ FILE: src/__tests__/icons.test.js ================================================ /* eslint-env jest */ import icons from '../icons'; jest.mock('../../dist/icons.json', () => ({ icon1: '', icon2: '', })); jest.mock('../tags.json', () => ({ icon1: ['foo', 'bar', 'hello', 'world'], })); test('exports correct object', () => { expect(icons).toMatchSnapshot(); }); ================================================ FILE: src/__tests__/index.test.js ================================================ /* eslint-env jest */ import feather from '../index'; test('has correct properties', () => { expect(feather).toHaveProperty('icons'); expect(feather).toHaveProperty('toSvg'); expect(feather).toHaveProperty('replace'); }); ================================================ FILE: src/__tests__/replace.node.test.js ================================================ /** * @jest-environment node */ /* eslint-env jest */ import replace from '../replace'; test('throws an error when run in node environment', () => { expect(replace).toThrowErrorMatchingSnapshot(); }); ================================================ FILE: src/__tests__/replace.test.js ================================================ /* eslint-env jest, browser */ import replace from '../replace'; jest.mock('../../dist/icons.json', () => ({ icon1: '', icon2: '', })); test('replaces [data-feather] elements with SVG markup', () => { document.body.innerHTML = ''; expect(document.body.innerHTML).toMatchSnapshot(); replace(); expect(document.body.innerHTML).toMatchSnapshot(); }); test('copies placeholder element attributes to tag', () => { document.body.innerHTML = ''; expect(document.body.innerHTML).toMatchSnapshot(); replace(); expect(document.body.innerHTML).toMatchSnapshot(); }); test('sets attributes passed as parameters', () => { document.body.innerHTML = ''; expect(document.body.innerHTML).toMatchSnapshot(); replace({ class: 'foo bar hello', 'stroke-width': 1.5, color: 'salmon' }); expect(document.body.innerHTML).toMatchSnapshot(); }); ================================================ FILE: src/__tests__/to-svg.test.js ================================================ /* eslint-env jest */ import toSvg from '../to-svg'; jest.mock('../../dist/icons.json', () => ({ icon1: '', })); test('returns correct string', () => { expect(toSvg('icon1')).toMatchSnapshot(); expect(toSvg('icon1', { 'stroke-width': 1, color: 'red' })).toMatchSnapshot(); expect(toSvg('icon1', { class: 'foo bar', color: 'red' })).toMatchSnapshot(); }); test('throws error when `name` parameter is undefined', () => { expect(() => toSvg()).toThrow(); }); test('throws error when passed unknown icon name', () => { expect(() => toSvg('foo')).toThrow(); }); ================================================ FILE: src/default-attrs.json ================================================ { "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" } ================================================ FILE: src/icon.js ================================================ import classnames from 'classnames/dedupe'; import DEFAULT_ATTRS from './default-attrs.json'; class Icon { constructor(name, contents, tags = []) { this.name = name; this.contents = contents; this.tags = tags; this.attrs = { ...DEFAULT_ATTRS, ...{ class: `feather feather-${name}` }, }; } /** * Create an SVG string. * @param {Object} attrs * @returns {string} */ toSvg(attrs = {}) { const combinedAttrs = { ...this.attrs, ...attrs, ...{ class: classnames(this.attrs.class, attrs.class) }, }; return `${this.contents}`; } /** * Return string representation of an `Icon`. * * Added for backward compatibility. If old code expects `feather.icons.` * to be a string, `toString()` will get implicitly called. * * @returns {string} */ toString() { return this.contents; } } /** * Convert attributes object to string of HTML attributes. * @param {Object} attrs * @returns {string} */ function attrsToString(attrs) { return Object.keys(attrs) .map(key => `${key}="${attrs[key]}"`) .join(' '); } export default Icon; ================================================ FILE: src/icons.js ================================================ import Icon from './icon'; import icons from '../dist/icons.json'; import tags from './tags.json'; export default Object.keys(icons) .map(key => new Icon(key, icons[key], tags[key])) .reduce((object, icon) => { object[icon.name] = icon; return object; }, {}); ================================================ FILE: src/index.js ================================================ import icons from './icons'; import toSvg from './to-svg'; import replace from './replace'; module.exports = { icons, toSvg, replace }; ================================================ FILE: src/replace.js ================================================ /* eslint-env browser */ import classnames from 'classnames/dedupe'; import icons from './icons'; /** * Replace all HTML elements that have a `data-feather` attribute with SVG markup * corresponding to the element's `data-feather` attribute value. * @param {Object} attrs */ function replace(attrs = {}) { if (typeof document === 'undefined') { throw new Error('`feather.replace()` only works in a browser environment.'); } const elementsToReplace = document.querySelectorAll('[data-feather]'); Array.from(elementsToReplace).forEach(element => replaceElement(element, attrs), ); } /** * Replace a single HTML element with SVG markup * corresponding to the element's `data-feather` attribute value. * @param {HTMLElement} element * @param {Object} attrs */ function replaceElement(element, attrs = {}) { const elementAttrs = getAttrs(element); const name = elementAttrs['data-feather']; delete elementAttrs['data-feather']; if (icons[name] === undefined) { console.warn(`feather: '${name}' is not a valid icon`); return; } const svgString = icons[name].toSvg({ ...attrs, ...elementAttrs, ...{ class: classnames(attrs.class, elementAttrs.class) }, }); const svgDocument = new DOMParser().parseFromString( svgString, 'image/svg+xml', ); const svgElement = svgDocument.querySelector('svg'); element.parentNode.replaceChild(svgElement, element); } /** * Get the attributes of an HTML element. * @param {HTMLElement} element * @returns {Object} */ function getAttrs(element) { return Array.from(element.attributes).reduce((attrs, attr) => { attrs[attr.name] = attr.value; return attrs; }, {}); } export default replace; ================================================ FILE: src/tags.json ================================================ { "activity": ["pulse", "health", "action", "motion"], "airplay": ["stream", "cast", "mirroring"], "alert-circle": ["warning", "alert", "danger"], "alert-octagon": ["warning", "alert", "danger"], "alert-triangle": ["warning", "alert", "danger"], "align-center": ["text alignment", "center"], "align-justify": ["text alignment", "justified"], "align-left": ["text alignment", "left"], "align-right": ["text alignment", "right"], "anchor": [], "archive": ["index", "box"], "at-sign": ["mention", "at", "email", "message"], "award": ["achievement", "badge"], "aperture": ["camera", "photo"], "bar-chart": ["statistics", "diagram", "graph"], "bar-chart-2": ["statistics", "diagram", "graph"], "battery": ["power", "electricity"], "battery-charging": ["power", "electricity"], "bell": ["alarm", "notification", "sound"], "bell-off": ["alarm", "notification", "silent"], "bluetooth": ["wireless"], "book-open": ["read", "library"], "book": ["read", "dictionary", "booklet", "magazine", "library"], "bookmark": ["read", "clip", "marker", "tag"], "box": ["cube"], "briefcase": ["work", "bag", "baggage", "folder"], "calendar": ["date"], "camera": ["photo"], "cast": ["chromecast", "airplay"], "chevron-down": ["expand"], "chevron-up": ["collapse"], "circle": ["off", "zero", "record"], "clipboard": ["copy"], "clock": ["time", "watch", "alarm"], "cloud-drizzle": ["weather", "shower"], "cloud-lightning": ["weather", "bolt"], "cloud-rain": ["weather"], "cloud-snow": ["weather", "blizzard"], "cloud": ["weather"], "codepen": ["logo"], "codesandbox": ["logo"], "code": ["source", "programming"], "coffee": ["drink", "cup", "mug", "tea", "cafe", "hot", "beverage"], "columns": ["layout"], "command": ["keyboard", "cmd", "terminal", "prompt"], "compass": ["navigation", "safari", "travel", "direction"], "copy": ["clone", "duplicate"], "corner-down-left": ["arrow", "return"], "corner-down-right": ["arrow"], "corner-left-down": ["arrow"], "corner-left-up": ["arrow"], "corner-right-down": ["arrow"], "corner-right-up": ["arrow"], "corner-up-left": ["arrow"], "corner-up-right": ["arrow"], "cpu": ["processor", "technology"], "credit-card": ["purchase", "payment", "cc"], "crop": ["photo", "image"], "crosshair": ["aim", "target"], "database": ["storage", "memory"], "delete": ["remove"], "disc": ["album", "cd", "dvd", "music"], "dollar-sign": ["currency", "money", "payment"], "droplet": ["water"], "edit": ["pencil", "change"], "edit-2": ["pencil", "change"], "edit-3": ["pencil", "change"], "eye": ["view", "watch"], "eye-off": ["view", "watch", "hide", "hidden"], "external-link": ["outbound"], "facebook": ["logo", "social"], "fast-forward": ["music"], "figma": ["logo", "design", "tool"], "file-minus": ["delete", "remove", "erase"], "file-plus": ["add", "create", "new"], "file-text": ["data", "txt", "pdf"], "film": ["movie", "video"], "filter": ["funnel", "hopper"], "flag": ["report"], "folder-minus": ["directory"], "folder-plus": ["directory"], "folder": ["directory"], "framer": ["logo", "design", "tool"], "frown": ["emoji", "face", "bad", "sad", "emotion"], "gift": ["present", "box", "birthday", "party"], "git-branch": ["code", "version control"], "git-commit": ["code", "version control"], "git-merge": ["code", "version control"], "git-pull-request": ["code", "version control"], "github": ["logo", "version control"], "gitlab": ["logo", "version control"], "globe": ["world", "browser", "language", "translate"], "hard-drive": ["computer", "server", "memory", "data"], "hash": ["hashtag", "number", "pound"], "headphones": ["music", "audio", "sound"], "heart": ["like", "love", "emotion"], "help-circle": ["question mark"], "hexagon": ["shape", "node.js", "logo"], "home": ["house", "living"], "image": ["picture"], "inbox": ["email"], "instagram": ["logo", "camera"], "key": ["password", "login", "authentication", "secure"], "layers": ["stack"], "layout": ["window", "webpage"], "life-buoy": ["help", "life ring", "support"], "link": ["chain", "url"], "link-2": ["chain", "url"], "linkedin": ["logo", "social media"], "list": ["options"], "lock": ["security", "password", "secure"], "log-in": ["sign in", "arrow", "enter"], "log-out": ["sign out", "arrow", "exit"], "mail": ["email", "message"], "map-pin": ["location", "navigation", "travel", "marker"], "map": ["location", "navigation", "travel"], "maximize": ["fullscreen"], "maximize-2": ["fullscreen", "arrows", "expand"], "meh": ["emoji", "face", "neutral", "emotion"], "menu": ["bars", "navigation", "hamburger"], "message-circle": ["comment", "chat"], "message-square": ["comment", "chat"], "mic-off": ["record", "sound", "mute"], "mic": ["record", "sound", "listen"], "minimize": ["exit fullscreen", "close"], "minimize-2": ["exit fullscreen", "arrows", "close"], "minus": ["subtract"], "monitor": ["tv", "screen", "display"], "moon": ["dark", "night"], "more-horizontal": ["ellipsis"], "more-vertical": ["ellipsis"], "mouse-pointer": ["arrow", "cursor"], "move": ["arrows"], "music": ["note"], "navigation": ["location", "travel"], "navigation-2": ["location", "travel"], "octagon": ["stop"], "package": ["box", "container"], "paperclip": ["attachment"], "pause": ["music", "stop"], "pause-circle": ["music", "audio", "stop"], "pen-tool": ["vector", "drawing"], "percent": ["discount"], "phone-call": ["ring"], "phone-forwarded": ["call"], "phone-incoming": ["call"], "phone-missed": ["call"], "phone-off": ["call", "mute"], "phone-outgoing": ["call"], "phone": ["call"], "play": ["music", "start"], "pie-chart": ["statistics", "diagram"], "play-circle": ["music", "start"], "plus": ["add", "new"], "plus-circle": ["add", "new"], "plus-square": ["add", "new"], "pocket": ["logo", "save"], "power": ["on", "off"], "printer": ["fax", "office", "device"], "radio": ["signal"], "refresh-cw": ["synchronise", "arrows"], "refresh-ccw": ["arrows"], "repeat": ["loop", "arrows"], "rewind": ["music"], "rotate-ccw": ["arrow"], "rotate-cw": ["arrow"], "rss": ["feed", "subscribe"], "save": ["floppy disk"], "scissors": ["cut"], "search": ["find", "magnifier", "magnifying glass"], "send": ["message", "mail", "email", "paper airplane", "paper aeroplane"], "settings": ["cog", "edit", "gear", "preferences"], "share-2": ["network", "connections"], "shield": ["security", "secure"], "shield-off": ["security", "insecure"], "shopping-bag": ["ecommerce", "cart", "purchase", "store"], "shopping-cart": ["ecommerce", "cart", "purchase", "store"], "shuffle": ["music"], "skip-back": ["music"], "skip-forward": ["music"], "slack": ["logo"], "slash": ["ban", "no"], "sliders": ["settings", "controls"], "smartphone": ["cellphone", "device"], "smile": ["emoji", "face", "happy", "good", "emotion"], "speaker": ["audio", "music"], "star": ["bookmark", "favorite", "like"], "stop-circle": ["media", "music"], "sun": ["brightness", "weather", "light"], "sunrise": ["weather", "time", "morning", "day"], "sunset": ["weather", "time", "evening", "night"], "tablet": ["device"], "tag": ["label"], "target": ["logo", "bullseye"], "terminal": ["code", "command line", "prompt"], "thermometer": ["temperature", "celsius", "fahrenheit", "weather"], "thumbs-down": ["dislike", "bad", "emotion"], "thumbs-up": ["like", "good", "emotion"], "toggle-left": ["on", "off", "switch"], "toggle-right": ["on", "off", "switch"], "tool": ["settings", "spanner"], "trash": ["garbage", "delete", "remove", "bin"], "trash-2": ["garbage", "delete", "remove", "bin"], "triangle": ["delta"], "truck": ["delivery", "van", "shipping", "transport", "lorry"], "tv": ["television", "stream"], "twitch": ["logo"], "twitter": ["logo", "social"], "type": ["text"], "umbrella": ["rain", "weather"], "unlock": ["security"], "user-check": ["followed", "subscribed"], "user-minus": ["delete", "remove", "unfollow", "unsubscribe"], "user-plus": ["new", "add", "create", "follow", "subscribe"], "user-x": ["delete", "remove", "unfollow", "unsubscribe", "unavailable"], "user": ["person", "account"], "users": ["group"], "video-off": ["camera", "movie", "film"], "video": ["camera", "movie", "film"], "voicemail": ["phone"], "volume": ["music", "sound", "mute"], "volume-1": ["music", "sound"], "volume-2": ["music", "sound"], "volume-x": ["music", "sound", "mute"], "watch": ["clock", "time"], "wifi-off": ["disabled"], "wifi": ["connection", "signal", "wireless"], "wind": ["weather", "air"], "x-circle": ["cancel", "close", "delete", "remove", "times", "clear"], "x-octagon": ["delete", "stop", "alert", "warning", "times", "clear"], "x-square": ["cancel", "close", "delete", "remove", "times", "clear"], "x": ["cancel", "close", "delete", "remove", "times", "clear"], "youtube": ["logo", "video", "play"], "zap-off": ["flash", "camera", "lightning"], "zap": ["flash", "camera", "lightning"], "zoom-in": ["magnifying glass"], "zoom-out": ["magnifying glass"] } ================================================ FILE: src/to-svg.js ================================================ import icons from './icons'; /** * Create an SVG string. * @deprecated * @param {string} name * @param {Object} attrs * @returns {string} */ function toSvg(name, attrs = {}) { console.warn( 'feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.', ); if (!name) { throw new Error('The required `key` (icon name) parameter is missing.'); } if (!icons[name]) { throw new Error( `No icon matching '${name}'. See the complete list of icons at https://feathericons.com`, ); } return icons[name].toSvg(attrs); } export default toSvg; ================================================ FILE: webpack.config.js ================================================ const path = require('path'); module.exports = { entry: ['core-js/es/array/from', path.resolve(__dirname, 'src/index.js')], output: { path: path.resolve(__dirname, 'dist'), libraryTarget: 'umd', library: 'feather', // Prevents webpack from referencing `window` in the UMD build // Source: https://git.io/vppgU globalObject: "typeof self !== 'undefined' ? self : this", }, devtool: 'source-map', module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, ], }, };