mirror of
https://github.com/feathericons/feather.git
synced 2023-08-10 21:13:24 +03:00
Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e80f80524a | |||
| b7d22291f1 | |||
| 5e62cab89a | |||
| 5dd498cc61 | |||
| 29e96b1109 | |||
| bc83bcc74b | |||
| 950ac1c2d0 | |||
| d2ea75622b | |||
| 8926f5fb9b | |||
| f72c5dd215 | |||
| 43dbba3a0a | |||
| dc2410025f | |||
| 365b5d13d5 |
28
README.md
28
README.md
@ -1,10 +1,20 @@
|
||||
# Feather
|
||||
|
||||
[](https://travis-ci.org/colebemis/feather)
|
||||
[](https://www.npmjs.com/package/feather-icons)
|
||||
[](https://npm-stat.com/charts.html?package=feather-icons&from=2017-06-01)
|
||||
[](https://codeclimate.com/github/colebemis/feather)
|
||||
[](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 legibility.
|
||||
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 readability.
|
||||
|
||||
[feathericons.com](https://feathericons.com)
|
||||
**[feathericons.com](https://feathericons.com)**
|
||||
|
||||
```
|
||||
npm install feather-icons
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
@ -31,7 +41,7 @@ Or copy and paste the following code snippet into a blank `html` file.
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<title></title>
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
|
||||
<body>
|
||||
|
||||
<!-- example icon -->
|
||||
@ -75,7 +85,9 @@ Include `feather.js` or `feather.min.js` with a `<script>` tag. These files are
|
||||
Or load the script from a CDN provider.
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
<!-- choose one -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
||||
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
|
||||
```
|
||||
|
||||
After including the script, `feather` will be available as a global variable.
|
||||
@ -217,13 +229,13 @@ You can pass `feather.replace()` an `options` object:
|
||||
</script>
|
||||
```
|
||||
|
||||
All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
|
||||
The id and classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>` tag:
|
||||
|
||||
```html
|
||||
<i class="foo bar" data-feather="circle"></i>
|
||||
<i id="my-circle-icon" class="foo bar" data-feather="circle"></i>
|
||||
<!--
|
||||
<i> will be replaced with:
|
||||
<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>
|
||||
<svg id="my-circle-icon" 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>
|
||||
-->
|
||||
|
||||
<script>
|
||||
@ -245,7 +257,7 @@ All classes on a placeholder element (i.e. `<i>`) will be copied to the `<svg>`
|
||||
- [ ] Add search/filter functionality to project website
|
||||
- [ ] Handle icon aliases
|
||||
- [ ] Handle usage of custom icons
|
||||
- [ ] Publish to Yarn registry
|
||||
- [ ] Improve SVG accessibility
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Feather</title>
|
||||
<!--
|
||||
In order to build the feather minimized js run
|
||||
$ npm run build
|
||||
in the cloned repository, or use the already built package available on unpkg.com.
|
||||
-->
|
||||
<script src="../dist/feather.min.js"></script>
|
||||
<!-- <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -15,4 +21,4 @@
|
||||
feather.replace()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -41,12 +41,14 @@ function replaceElement(element, options) {
|
||||
return;
|
||||
}
|
||||
|
||||
const elementClassAttr = element.getAttribute('class');
|
||||
const elementClassAttr = element.getAttribute('class') || '';
|
||||
const elementIdAttr = element.getAttribute('id');
|
||||
const classNames = (
|
||||
options.class ? `${options.class} ${elementClassAttr}` : elementClassAttr
|
||||
);
|
||||
|
||||
const svgString = toSvg(key, Object.assign({}, options, { class: classNames }));
|
||||
const svgOptions = Object.assign({}, options, { class: classNames, id: elementIdAttr });
|
||||
const svgString = toSvg(key, svgOptions);
|
||||
const svgDocument = new DOMParser().parseFromString(svgString, 'image/svg+xml');
|
||||
const svgElement = svgDocument.querySelector('svg');
|
||||
|
||||
|
||||
@ -35,7 +35,7 @@ export default function toSvg(key, options = {}) {
|
||||
|
||||
combinedOptions.class = addDefaultClassNames(combinedOptions.class, key);
|
||||
|
||||
const attributes = optionsToAtrributes(combinedOptions);
|
||||
const attributes = optionsToAttributes(combinedOptions);
|
||||
|
||||
return `<svg ${attributes}>${icons[key]}</svg>`;
|
||||
}
|
||||
@ -64,11 +64,13 @@ function addDefaultClassNames(classNames, key) {
|
||||
* @param {Object} options
|
||||
* @returns {string}
|
||||
*/
|
||||
function optionsToAtrributes(options) {
|
||||
function optionsToAttributes(options) {
|
||||
const attributes = [];
|
||||
|
||||
Object.keys(options).forEach(key => {
|
||||
attributes.push(`${key}="${options[key]}"`);
|
||||
if (options[key]) {
|
||||
attributes.push(`${key}="${options[key]}"`);
|
||||
}
|
||||
});
|
||||
|
||||
return attributes.join(' ');
|
||||
|
||||
Reference in New Issue
Block a user