Cara menggunakan global python w3

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.

Table of Contents Show

Table of Contents
Quick Start
Client-side JavaScript
API Reference
npm install feather-icons --save0
<i data-feather="circle"></i>5
<script> feather.replace() </script>9

https://feathericons.com

npm install feather-icons

Quick Start

Start with this CodePen Template to begin prototyping with Feather in the browser.

Or copy and paste the following code snippet into a blank

npm install feather-icons --save

4 file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Usage

At its core, Feather is a collection of files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g.

npm install feather-icons --save

npm install feather-icons --save

npm install feather-icons --save

npm install feather-icons --save

npm install feather-icons --save

<script src="path/to/dist/feather.js"></script>

0). Here's a helpful article detailing the many ways SVGs can be used on the web:

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.

npm install feather-icons --save

Or just copy

<script src="path/to/dist/feather.js"></script>

1 or

<script src="path/to/dist/feather.js"></script>

2 into your project directory. You don't need both

<script src="path/to/dist/feather.js"></script>

1 and

<script src="path/to/dist/feather.js"></script>

2. Include

Include

<script src="path/to/dist/feather.js"></script>

1 or

<script src="path/to/dist/feather.js"></script>

2 with a

<script src="path/to/dist/feather.js"></script>

7 tag:

<script src="path/to/dist/feather.js"></script>

Note:

<script src="path/to/dist/feather.js"></script>

1 and

<script src="path/to/dist/feather.js"></script>

2 are located in the

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

0 directory of the npm package.

Or load the script from a CDN provider:

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

After including the script,

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

1 will be available as a global variable.

3. Use

To use an icon on your page, add a

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

2 attribute with the icon name to an element:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

4. Replace

Call the

npm install feather-icons --save

2 method:

<script>
  feather.replace()
</script>

All elements that have a

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

2 attribute will be replaced with SVG markup corresponding to their

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

2 attribute value. See the for more information about

npm install feather-icons --save

Node

1. Install

Install with npm:

npm install feather-icons --save

2. Require

const feather = require('feather-icons')

3. Use

feather.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    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()
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>

feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

See the for more information about the available properties and methods of the

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

1 object.

SVG Sprite

1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

8 into your project directory.

2. Use

Include an icon on your page with the following markup:

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Note:

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9 in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Figma

Feather is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.

API Reference

npm install feather-icons --save0

An object with data about every icon.

Usage

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Note:
<i data-feather="circle"></i>
1 in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g.
<i data-feather="circle"></i>
2) cannot be accessed using dot notation (e.g.
<i data-feather="circle"></i>
3). Instead, use bracket notation (e.g.
<i data-feather="circle"></i>
4).

View Source

<i data-feather="circle"></i>5

Returns an SVG string.

Parameters

NameTypeDescription

<i data-feather="circle"></i>

6 (optional)ObjectKey-value pairs in the

<i data-feather="circle"></i>

6 object will be mapped to HTML attributes on the

<i data-feather="circle"></i>

8 tag (e.g.

<i data-feather="circle"></i>

9 maps to

<script>
  feather.replace()
</script>

0). All default attributes on the

<i data-feather="circle"></i>

8 tag can be overridden with the

<i data-feather="circle"></i>

6 object.

Hint: You might find these SVG attributes helpful for manipulating icons:

```
<script>
  feather.replace()
</script>
```
3
```
<script>
  feather.replace()
</script>
```
4
```
<script>
  feather.replace()
</script>
```
5
```
<script>
  feather.replace()
</script>
```
6
```
<script>
  feather.replace()
</script>
```
7
```
<script>
  feather.replace()
</script>
```
8

Usage

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

View Source

<script> feather.replace() </script>9

Replaces all elements that have a

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

2 attribute with SVG markup corresponding to the element's

<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>