Giter VIP home page Giter VIP logo

angular-feather's Introduction

angular-feather

Description

This package allows you to use the Feather Icons in your angular applications. The icons are designed by Cole Bemis. Import only the icons that you need.

Demo

>> See live demo << (right-click, open in new tab)

Usage

1. Install the package

npm install angular-feather

2. Generate a module to host the icons you'll import

ng generate module icons

3. Import assets

You need to import:

  • FeatherModule, as it contains the <i-feather> component
  • The SVGs that you need

We put this in IconsModule for modularity. See example below:

file: icon.module.ts

import { NgModule } from '@angular/core';

import { FeatherModule } from 'angular-feather';
import { Camera, Heart, Github } from 'angular-feather/icons';

// Select some icons (use an object, not an array)
const icons = {
  Camera,
  Heart,
  Github
};

@NgModule({
  imports: [
    FeatherModule.pick(icons)
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule { }

// NOTES:
// 1. We add FeatherModule to the 'exports', since the <i-feather> component will be used in templates of parent module
// 2. Don't forget to pick some icons using FeatherModule.pick({ ... })

3. Use it in template

After importing the IconsModule in your feature or shared module, use the icons as follows:

<i-feather name="github" class="someclass"></i-feather>
<i-feather name="heart" style="color: green;"></i-feather>
<i-feather name="camera"></i-feather>

Styling icons

<i-feather name="heart" class="big fill-red"></i-feather>
.big {
  height: 50px;
  width: 50px;
}

.fill-red {
  fill: red;
}

Available icons

Refer to the table below for the list of all available icons.

Symbol to import HTML template
activity Activity <i-feather name="activity"></i-feather>
airplay Airplay <i-feather name="airplay"></i-feather>
alert-circle AlertCircle <i-feather name="alert-circle"></i-feather>
alert-octagon AlertOctagon <i-feather name="alert-octagon"></i-feather>
alert-triangle AlertTriangle <i-feather name="alert-triangle"></i-feather>
align-center AlignCenter <i-feather name="align-center"></i-feather>
align-justify AlignJustify <i-feather name="align-justify"></i-feather>
align-left AlignLeft <i-feather name="align-left"></i-feather>
align-right AlignRight <i-feather name="align-right"></i-feather>
anchor Anchor <i-feather name="anchor"></i-feather>
aperture Aperture <i-feather name="aperture"></i-feather>
archive Archive <i-feather name="archive"></i-feather>
arrow-down-circle ArrowDownCircle <i-feather name="arrow-down-circle"></i-feather>
arrow-down-left ArrowDownLeft <i-feather name="arrow-down-left"></i-feather>
arrow-down-right ArrowDownRight <i-feather name="arrow-down-right"></i-feather>
arrow-down ArrowDown <i-feather name="arrow-down"></i-feather>
arrow-left-circle ArrowLeftCircle <i-feather name="arrow-left-circle"></i-feather>
arrow-left ArrowLeft <i-feather name="arrow-left"></i-feather>
arrow-right-circle ArrowRightCircle <i-feather name="arrow-right-circle"></i-feather>
arrow-right ArrowRight <i-feather name="arrow-right"></i-feather>
arrow-up-circle ArrowUpCircle <i-feather name="arrow-up-circle"></i-feather>
arrow-up-left ArrowUpLeft <i-feather name="arrow-up-left"></i-feather>
arrow-up-right ArrowUpRight <i-feather name="arrow-up-right"></i-feather>
arrow-up ArrowUp <i-feather name="arrow-up"></i-feather>
at-sign AtSign <i-feather name="at-sign"></i-feather>
award Award <i-feather name="award"></i-feather>
bar-chart-2 BarChart2 <i-feather name="bar-chart-2"></i-feather>
bar-chart BarChart <i-feather name="bar-chart"></i-feather>
battery-charging BatteryCharging <i-feather name="battery-charging"></i-feather>
battery Battery <i-feather name="battery"></i-feather>
bell-off BellOff <i-feather name="bell-off"></i-feather>
bell Bell <i-feather name="bell"></i-feather>
bluetooth Bluetooth <i-feather name="bluetooth"></i-feather>
bold Bold <i-feather name="bold"></i-feather>
book-open BookOpen <i-feather name="book-open"></i-feather>
book Book <i-feather name="book"></i-feather>
bookmark Bookmark <i-feather name="bookmark"></i-feather>
box Box <i-feather name="box"></i-feather>
briefcase Briefcase <i-feather name="briefcase"></i-feather>
calendar Calendar <i-feather name="calendar"></i-feather>
camera-off CameraOff <i-feather name="camera-off"></i-feather>
camera Camera <i-feather name="camera"></i-feather>
cast Cast <i-feather name="cast"></i-feather>
check-circle CheckCircle <i-feather name="check-circle"></i-feather>
check-square CheckSquare <i-feather name="check-square"></i-feather>
check Check <i-feather name="check"></i-feather>
chevron-down ChevronDown <i-feather name="chevron-down"></i-feather>
chevron-left ChevronLeft <i-feather name="chevron-left"></i-feather>
chevron-right ChevronRight <i-feather name="chevron-right"></i-feather>
chevron-up ChevronUp <i-feather name="chevron-up"></i-feather>
chevrons-down ChevronsDown <i-feather name="chevrons-down"></i-feather>
chevrons-left ChevronsLeft <i-feather name="chevrons-left"></i-feather>
chevrons-right ChevronsRight <i-feather name="chevrons-right"></i-feather>
chevrons-up ChevronsUp <i-feather name="chevrons-up"></i-feather>
chrome Chrome <i-feather name="chrome"></i-feather>
circle Circle <i-feather name="circle"></i-feather>
clipboard Clipboard <i-feather name="clipboard"></i-feather>
clock Clock <i-feather name="clock"></i-feather>
cloud-drizzle CloudDrizzle <i-feather name="cloud-drizzle"></i-feather>
cloud-lightning CloudLightning <i-feather name="cloud-lightning"></i-feather>
cloud-off CloudOff <i-feather name="cloud-off"></i-feather>
cloud-rain CloudRain <i-feather name="cloud-rain"></i-feather>
cloud-snow CloudSnow <i-feather name="cloud-snow"></i-feather>
cloud Cloud <i-feather name="cloud"></i-feather>
code Code <i-feather name="code"></i-feather>
codepen Codepen <i-feather name="codepen"></i-feather>
codesandbox Codesandbox <i-feather name="codesandbox"></i-feather>
coffee Coffee <i-feather name="coffee"></i-feather>
columns Columns <i-feather name="columns"></i-feather>
command Command <i-feather name="command"></i-feather>
compass Compass <i-feather name="compass"></i-feather>
copy Copy <i-feather name="copy"></i-feather>
corner-down-left CornerDownLeft <i-feather name="corner-down-left"></i-feather>
corner-down-right CornerDownRight <i-feather name="corner-down-right"></i-feather>
corner-left-down CornerLeftDown <i-feather name="corner-left-down"></i-feather>
corner-left-up CornerLeftUp <i-feather name="corner-left-up"></i-feather>
corner-right-down CornerRightDown <i-feather name="corner-right-down"></i-feather>
corner-right-up CornerRightUp <i-feather name="corner-right-up"></i-feather>
corner-up-left CornerUpLeft <i-feather name="corner-up-left"></i-feather>
corner-up-right CornerUpRight <i-feather name="corner-up-right"></i-feather>
cpu Cpu <i-feather name="cpu"></i-feather>
credit-card CreditCard <i-feather name="credit-card"></i-feather>
crop Crop <i-feather name="crop"></i-feather>
crosshair Crosshair <i-feather name="crosshair"></i-feather>
database Database <i-feather name="database"></i-feather>
delete Delete <i-feather name="delete"></i-feather>
disc Disc <i-feather name="disc"></i-feather>
divide-circle DivideCircle <i-feather name="divide-circle"></i-feather>
divide-square DivideSquare <i-feather name="divide-square"></i-feather>
divide Divide <i-feather name="divide"></i-feather>
dollar-sign DollarSign <i-feather name="dollar-sign"></i-feather>
download-cloud DownloadCloud <i-feather name="download-cloud"></i-feather>
download Download <i-feather name="download"></i-feather>
dribbble Dribbble <i-feather name="dribbble"></i-feather>
droplet Droplet <i-feather name="droplet"></i-feather>
edit-2 Edit2 <i-feather name="edit-2"></i-feather>
edit-3 Edit3 <i-feather name="edit-3"></i-feather>
edit Edit <i-feather name="edit"></i-feather>
external-link ExternalLink <i-feather name="external-link"></i-feather>
eye-off EyeOff <i-feather name="eye-off"></i-feather>
eye Eye <i-feather name="eye"></i-feather>
facebook Facebook <i-feather name="facebook"></i-feather>
fast-forward FastForward <i-feather name="fast-forward"></i-feather>
feather Feather <i-feather name="feather"></i-feather>
figma Figma <i-feather name="figma"></i-feather>
file-minus FileMinus <i-feather name="file-minus"></i-feather>
file-plus FilePlus <i-feather name="file-plus"></i-feather>
file-text FileText <i-feather name="file-text"></i-feather>
file File <i-feather name="file"></i-feather>
film Film <i-feather name="film"></i-feather>
filter Filter <i-feather name="filter"></i-feather>
flag Flag <i-feather name="flag"></i-feather>
folder-minus FolderMinus <i-feather name="folder-minus"></i-feather>
folder-plus FolderPlus <i-feather name="folder-plus"></i-feather>
folder Folder <i-feather name="folder"></i-feather>
framer Framer <i-feather name="framer"></i-feather>
frown Frown <i-feather name="frown"></i-feather>
gift Gift <i-feather name="gift"></i-feather>
git-branch GitBranch <i-feather name="git-branch"></i-feather>
git-commit GitCommit <i-feather name="git-commit"></i-feather>
git-merge GitMerge <i-feather name="git-merge"></i-feather>
git-pull-request GitPullRequest <i-feather name="git-pull-request"></i-feather>
github Github <i-feather name="github"></i-feather>
gitlab Gitlab <i-feather name="gitlab"></i-feather>
globe Globe <i-feather name="globe"></i-feather>
grid Grid <i-feather name="grid"></i-feather>
hard-drive HardDrive <i-feather name="hard-drive"></i-feather>
hash Hash <i-feather name="hash"></i-feather>
headphones Headphones <i-feather name="headphones"></i-feather>
heart Heart <i-feather name="heart"></i-feather>
help-circle HelpCircle <i-feather name="help-circle"></i-feather>
hexagon Hexagon <i-feather name="hexagon"></i-feather>
home Home <i-feather name="home"></i-feather>
image Image <i-feather name="image"></i-feather>
inbox Inbox <i-feather name="inbox"></i-feather>
info Info <i-feather name="info"></i-feather>
instagram Instagram <i-feather name="instagram"></i-feather>
italic Italic <i-feather name="italic"></i-feather>
key Key <i-feather name="key"></i-feather>
layers Layers <i-feather name="layers"></i-feather>
layout Layout <i-feather name="layout"></i-feather>
life-buoy LifeBuoy <i-feather name="life-buoy"></i-feather>
link-2 Link2 <i-feather name="link-2"></i-feather>
link Link <i-feather name="link"></i-feather>
linkedin Linkedin <i-feather name="linkedin"></i-feather>
list List <i-feather name="list"></i-feather>
loader Loader <i-feather name="loader"></i-feather>
lock Lock <i-feather name="lock"></i-feather>
log-in LogIn <i-feather name="log-in"></i-feather>
log-out LogOut <i-feather name="log-out"></i-feather>
mail Mail <i-feather name="mail"></i-feather>
map-pin MapPin <i-feather name="map-pin"></i-feather>
map Map <i-feather name="map"></i-feather>
maximize-2 Maximize2 <i-feather name="maximize-2"></i-feather>
maximize Maximize <i-feather name="maximize"></i-feather>
meh Meh <i-feather name="meh"></i-feather>
menu Menu <i-feather name="menu"></i-feather>
message-circle MessageCircle <i-feather name="message-circle"></i-feather>
message-square MessageSquare <i-feather name="message-square"></i-feather>
mic-off MicOff <i-feather name="mic-off"></i-feather>
mic Mic <i-feather name="mic"></i-feather>
minimize-2 Minimize2 <i-feather name="minimize-2"></i-feather>
minimize Minimize <i-feather name="minimize"></i-feather>
minus-circle MinusCircle <i-feather name="minus-circle"></i-feather>
minus-square MinusSquare <i-feather name="minus-square"></i-feather>
minus Minus <i-feather name="minus"></i-feather>
monitor Monitor <i-feather name="monitor"></i-feather>
moon Moon <i-feather name="moon"></i-feather>
more-horizontal MoreHorizontal <i-feather name="more-horizontal"></i-feather>
more-vertical MoreVertical <i-feather name="more-vertical"></i-feather>
mouse-pointer MousePointer <i-feather name="mouse-pointer"></i-feather>
move Move <i-feather name="move"></i-feather>
music Music <i-feather name="music"></i-feather>
navigation-2 Navigation2 <i-feather name="navigation-2"></i-feather>
navigation Navigation <i-feather name="navigation"></i-feather>
octagon Octagon <i-feather name="octagon"></i-feather>
package Package <i-feather name="package"></i-feather>
paperclip Paperclip <i-feather name="paperclip"></i-feather>
pause-circle PauseCircle <i-feather name="pause-circle"></i-feather>
pause Pause <i-feather name="pause"></i-feather>
pen-tool PenTool <i-feather name="pen-tool"></i-feather>
percent Percent <i-feather name="percent"></i-feather>
phone-call PhoneCall <i-feather name="phone-call"></i-feather>
phone-forwarded PhoneForwarded <i-feather name="phone-forwarded"></i-feather>
phone-incoming PhoneIncoming <i-feather name="phone-incoming"></i-feather>
phone-missed PhoneMissed <i-feather name="phone-missed"></i-feather>
phone-off PhoneOff <i-feather name="phone-off"></i-feather>
phone-outgoing PhoneOutgoing <i-feather name="phone-outgoing"></i-feather>
phone Phone <i-feather name="phone"></i-feather>
pie-chart PieChart <i-feather name="pie-chart"></i-feather>
play-circle PlayCircle <i-feather name="play-circle"></i-feather>
play Play <i-feather name="play"></i-feather>
plus-circle PlusCircle <i-feather name="plus-circle"></i-feather>
plus-square PlusSquare <i-feather name="plus-square"></i-feather>
plus Plus <i-feather name="plus"></i-feather>
pocket Pocket <i-feather name="pocket"></i-feather>
power Power <i-feather name="power"></i-feather>
printer Printer <i-feather name="printer"></i-feather>
radio Radio <i-feather name="radio"></i-feather>
refresh-ccw RefreshCcw <i-feather name="refresh-ccw"></i-feather>
refresh-cw RefreshCw <i-feather name="refresh-cw"></i-feather>
repeat Repeat <i-feather name="repeat"></i-feather>
rewind Rewind <i-feather name="rewind"></i-feather>
rotate-ccw RotateCcw <i-feather name="rotate-ccw"></i-feather>
rotate-cw RotateCw <i-feather name="rotate-cw"></i-feather>
rss Rss <i-feather name="rss"></i-feather>
save Save <i-feather name="save"></i-feather>
scissors Scissors <i-feather name="scissors"></i-feather>
search Search <i-feather name="search"></i-feather>
send Send <i-feather name="send"></i-feather>
server Server <i-feather name="server"></i-feather>
settings Settings <i-feather name="settings"></i-feather>
share-2 Share2 <i-feather name="share-2"></i-feather>
share Share <i-feather name="share"></i-feather>
shield-off ShieldOff <i-feather name="shield-off"></i-feather>
shield Shield <i-feather name="shield"></i-feather>
shopping-bag ShoppingBag <i-feather name="shopping-bag"></i-feather>
shopping-cart ShoppingCart <i-feather name="shopping-cart"></i-feather>
shuffle Shuffle <i-feather name="shuffle"></i-feather>
sidebar Sidebar <i-feather name="sidebar"></i-feather>
skip-back SkipBack <i-feather name="skip-back"></i-feather>
skip-forward SkipForward <i-feather name="skip-forward"></i-feather>
slack Slack <i-feather name="slack"></i-feather>
slash Slash <i-feather name="slash"></i-feather>
sliders Sliders <i-feather name="sliders"></i-feather>
smartphone Smartphone <i-feather name="smartphone"></i-feather>
smile Smile <i-feather name="smile"></i-feather>
speaker Speaker <i-feather name="speaker"></i-feather>
square Square <i-feather name="square"></i-feather>
star Star <i-feather name="star"></i-feather>
stop-circle StopCircle <i-feather name="stop-circle"></i-feather>
sun Sun <i-feather name="sun"></i-feather>
sunrise Sunrise <i-feather name="sunrise"></i-feather>
sunset Sunset <i-feather name="sunset"></i-feather>
table Table <i-feather name="table"></i-feather>
tablet Tablet <i-feather name="tablet"></i-feather>
tag Tag <i-feather name="tag"></i-feather>
target Target <i-feather name="target"></i-feather>
terminal Terminal <i-feather name="terminal"></i-feather>
thermometer Thermometer <i-feather name="thermometer"></i-feather>
thumbs-down ThumbsDown <i-feather name="thumbs-down"></i-feather>
thumbs-up ThumbsUp <i-feather name="thumbs-up"></i-feather>
toggle-left ToggleLeft <i-feather name="toggle-left"></i-feather>
toggle-right ToggleRight <i-feather name="toggle-right"></i-feather>
tool Tool <i-feather name="tool"></i-feather>
trash-2 Trash2 <i-feather name="trash-2"></i-feather>
trash Trash <i-feather name="trash"></i-feather>
trello Trello <i-feather name="trello"></i-feather>
trending-down TrendingDown <i-feather name="trending-down"></i-feather>
trending-up TrendingUp <i-feather name="trending-up"></i-feather>
triangle Triangle <i-feather name="triangle"></i-feather>
truck Truck <i-feather name="truck"></i-feather>
tv Tv <i-feather name="tv"></i-feather>
twitch Twitch <i-feather name="twitch"></i-feather>
twitter Twitter <i-feather name="twitter"></i-feather>
type Type <i-feather name="type"></i-feather>
umbrella Umbrella <i-feather name="umbrella"></i-feather>
underline Underline <i-feather name="underline"></i-feather>
unlock Unlock <i-feather name="unlock"></i-feather>
upload-cloud UploadCloud <i-feather name="upload-cloud"></i-feather>
upload Upload <i-feather name="upload"></i-feather>
user-check UserCheck <i-feather name="user-check"></i-feather>
user-minus UserMinus <i-feather name="user-minus"></i-feather>
user-plus UserPlus <i-feather name="user-plus"></i-feather>
user-x UserX <i-feather name="user-x"></i-feather>
user User <i-feather name="user"></i-feather>
users Users <i-feather name="users"></i-feather>
video-off VideoOff <i-feather name="video-off"></i-feather>
video Video <i-feather name="video"></i-feather>
voicemail Voicemail <i-feather name="voicemail"></i-feather>
volume-1 Volume1 <i-feather name="volume-1"></i-feather>
volume-2 Volume2 <i-feather name="volume-2"></i-feather>
volume-x VolumeX <i-feather name="volume-x"></i-feather>
volume Volume <i-feather name="volume"></i-feather>
watch Watch <i-feather name="watch"></i-feather>
wifi-off WifiOff <i-feather name="wifi-off"></i-feather>
wifi Wifi <i-feather name="wifi"></i-feather>
wind Wind <i-feather name="wind"></i-feather>
x-circle XCircle <i-feather name="x-circle"></i-feather>
x-octagon XOctagon <i-feather name="x-octagon"></i-feather>
x-square XSquare <i-feather name="x-square"></i-feather>
x X <i-feather name="x"></i-feather>
youtube Youtube <i-feather name="youtube"></i-feather>
zap-off ZapOff <i-feather name="zap-off"></i-feather>
zap Zap <i-feather name="zap"></i-feather>
zoom-in ZoomIn <i-feather name="zoom-in"></i-feather>
zoom-out ZoomOut <i-feather name="zoom-out"></i-feather>

FAQ

1. Is there a way to pick all the icons at once?

Yes, by importing allIcons from 'angular-feather/icons':

import { allIcons } from 'angular-feather/icons';

@NgModule({
  imports: [
    FeatherModule.pick(allIcons)
  ],
  exports: [
    FeatherModule
  ]
})
export class IconsModule { }

However, keep in mind that by doing this, all icons will end up in your application bundle. While this may not be much of an issue for prototyping, it is not recommended for any application that you plan to release.

License

MIT © Michael Bazos

angular-feather's People

Contributors

anikets43 avatar dependabot[bot] avatar michaelbazos avatar radiumrasheed avatar skilletspecial avatar ttalle avatar wbhob avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-feather's Issues

Make icons resizable.

I couldn't see from the source code or docs how to make the icons resizable.
Is this currently possible, or are they fixed size. I can't seem to resize them in external css either.

Making the example below always 24 by 24
<i-log-in></i-log-in>

Cannot AOT serve/build with latest versions supported by @angular/cli 1.7.0 unless I include every icon.

See output below. Any icon not included produces a line of error message. The fewer you include, the longer the list. I was able to get it to build by including every Icon, but this isn't really suitable for production.

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.0
Node: 8.9.4
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.11.0
Date: 2018-02-16T22:47:40.542Z
Hash: f96c9b79446f8903ec9b
Time: 14029ms
chunk {0} styles.5bbd9c79dc6e08744c70.bundle.css (styles) 189 kB [initial] [rendered]
chunk {1} polyfills.997d8cc03812de50ae67.bundle.js (polyfills) 84 bytes [initial] [rendered]
chunk {2} main.ee32620ecd1edff94184.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

ERROR in : Cannot determine the module for class IconArrowDownCircle in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconArrowDownCircle to the NgModule to fix it.
Cannot determine the module for class IconArrowLeftCircle in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconArrowLeftCircle to the NgModule to fix it.
Cannot determine the module for class IconArrowRightCircle in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconArrowRightCircle to the NgModule to fix it.
Cannot determine the module for class IconArrowUpCircle in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconArrowUpCircle to the NgModule to fix it.
Cannot determine the module for class IconBookOpen in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconBookOpen to the NgModule to fix it.
Cannot determine the module for class IconCode in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconCode to the NgModule to fix it.
Cannot determine the module for class IconDatabase in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconDatabase to the NgModule to fix it.
Cannot determine the module for class IconDollarSign in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconDollarSign to the NgModule to fix it.
Cannot determine the module for class IconFolderMinus in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconFolderMinus to the NgModule to fix it.
Cannot determine the module for class IconFolderPlus in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconFolderPlus to the NgModule to fix it.
Cannot determine the module for class IconGitBranch in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconGitBranch to the NgModule to fix it.
Cannot determine the module for class IconGitCommit in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconGitCommit to the NgModule to fix it.
Cannot determine the module for class IconGitMerge in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconGitMerge to the NgModule to fix it.
Cannot determine the module for class IconGitPullRequest in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconGitPullRequest to the NgModule to fix it.
Cannot determine the module for class IconHardDrive in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconHardDrive to the NgModule to fix it.
Cannot determine the module for class IconLinkedin in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconLinkedin to the NgModule to fix it.
Cannot determine the module for class IconRss in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconRss to the NgModule to fix it.
Cannot determine the module for class IconSend in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconSend to the NgModule to fix it.
Cannot determine the module for class IconShieldOff in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconShieldOff to the NgModule to fix it.
Cannot determine the module for class IconShoppingBag in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconShoppingBag to the NgModule to fix it.
Cannot determine the module for class IconTerminal in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconTerminal to the NgModule to fix it.
Cannot determine the module for class IconTruck in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconTruck to the NgModule to fix it.
Cannot determine the module for class IconZapOff in C:/Users/Morgan/Websites/rhc/node_modules/angular-feather/angular-feather.d.ts! Add IconZapOff to the NgModule to fix it.

Providing an alt

Is there any way for me to provide an "alt" value for the icons when I use i-feather ?

NullInjectorError: No provider for Icons

Node V: 14.17.0
Npm V: 6.14.13
NG CLI: 12
Feather Icon: 6.1.0
OS: Windows

I have a feature module called Core Module that has components for the layout of my application. Such components are imported into a layout module for different layout styles for the application. Feather icons is imported into the Core module because the sidebar makes use of them. Now when i run ng serve or npm start i get the this error:
ERROR NullInjectorError: R3InjectorError(AppModule)[Icons -> Icons -> Icons]: NullInjectorError: No provider for Icons

Now by this i understand that one of my imports i.e. the Feather Icon module is missing a provider but it isnt clear where i need to provide this class or service and which particular class i need to provide.

I can't get the icons by its name -> Error not found : iconName

I can't get the icons by its name.
Looking the error, I saw that the array is being build with index numbers instead of their alias name.
I'm using angular 8.0.3, I don't think this could be the problem.

image

icons.module.ts :

`
import { NgModule } from '@angular/core';
import { FeatherModule } from 'angular-feather';
import {
Slash,
Info,
Check,
Home,
Github,
Archive,
Heart
} from 'angular-feather/icons';

const icons = [Slash, Info, Check, Home, Github, Archive, Heart];

@NgModule({
imports: [FeatherModule.pick(icons)],
exports: [FeatherModule]
})
export class IconsModule {}
`

<i-feather name="3" ></i-feather> Working
<i-feather name="home" ></i-feather> Not Working

Can't resize icons with v 5.3

I tried styling icons via CSS classes, just as in the README example, but icons won't resize; their parent container just get bigger, while the actual SVG image stays the same.

This is happening in Firefox at least.

Is this library alive?

Hello!

There is any plans to maintain this library? Add new icons / update to latest angular version?

FeatureRequest: Tool Icon

It would be great if the Tool Icon could be added to the List...,

export const Tool = "<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tool"> <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path> </svg>";

How to add position alignment to the icon

I have tried to add margin-top css style to position the icon a little top but it doesn't work
eg: name="arrow-right" class="arrow-on-btn"

css:.arrow-on-btn {
margin-top: -3px !important;
}
Is there any way to add margin style to position icon??

Support for Standalone components

I was trying to write a standalone component in angular 15
And I tried:

@Component({
    selector: 'my-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    standalone: true,
    imports: [SharedModule, FeatherModule.pick(ChevronRight)],
})

Which gives the error:

imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead

So, I was wondering how can I use this package with standalone components ?

Import all icons at once?

Will definitely be using a lot of these feather icons on a few of my Angular projects, was curious if there was a way to just add one line in app.module.ts to import icon set opposed to individually?

Wrong spacing

Hi, I am unable to vertically center i-feather and span inside div. When I inspect i-feather element, there is some extra space at the top, which is not margin or padding. Anyone had some similar issue?

<div class="container">
   <i-feather name="link" class="link"></i-feather>
   <span class="font-size">3</span>
</div>

ModuleWithProviders type without a generic type argument

Description

I've got the following error while building an app with Ivy:

Error: FeatherModule.pick(icons) returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

Environment of the app

"dependencies": {
    "@angular/animations": "~9.1.6",
    "@angular/common": "~9.1.6",
    "@angular/compiler": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/localize": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "angular-feather": "^6.0.9",
    "bootstrap": "^4.4.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.5",
    "@angular/cli": "~9.1.5",
    "@angular/compiler-cli": "~9.1.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }

TypeError: Cannot read property 'kind' of undefined on building an app with the library

First of all, great library. I was using it for a while but recently running ng build --prod started yielding the following error:

ERROR in ./node_modules/angular-feather/fesm5/angular-feather.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined

At first I thought that the problem was with webpack or some Angular dependencies. Unfortunately, it seems like the only solution that currently works for me is removing angular-feather library in order to make the build process work again.

Any ideas why it can be happening and what could be the solutions?

Possible to add custom icons?

Hi, thanks for the library, it works very well in Angular 7 for me. One question would be if it's possible to import my own svg icons in this library, because otherwise they have to be requested here right?

Thanks

Angular 14 support

Hello,

Can add support of Angular 14.

For information, stacktrace :

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/cdk
npm ERR!     peer @angular/cdk@"14.0.0" from @angular/[email protected]
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.0.0" from the root project
npm ERR!     @angular/cdk@"^14.0.0" from the root project
npm ERR!   peer @angular/common@"14.0.0" from @angular/[email protected]
npm ERR!   node_modules/@angular/forms
npm ERR!     peer @angular/forms@"^14.0.0 || ^15.0.0" from @angular/[email protected]
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^14.0.0" from the root project
npm ERR!     peer @angular/forms@">=9.0.0" from @ckeditor/[email protected]
npm ERR!     node_modules/@ckeditor/ckeditor5-angular
npm ERR!       @ckeditor/ckeditor5-angular@"^4.0.0" from the root project
npm ERR!     2 more (the root project, @ng-bootstrap/ng-bootstrap)
npm ERR!   14 more (@angular/material, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"~13.1.1" from [email protected]
npm ERR! node_modules/angular-feather
npm ERR!   angular-feather@"^6.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"~13.1.1" from [email protected]
npm ERR!   node_modules/angular-feather
npm ERR!     angular-feather@"^6.3.0" from the root project
npm ERR!

Icon does not update

When the name input changes, the icon does not update.

I imagine(?) this was the reason for going from <i-heart></i-heart> to <i-feather [name]="'heart'"></i-feather>, but it doesn't work.

Referencing angular-feather in systems.config.js - Angular running on ASP MVC

Hi,
I have an Angular 6 project running on ASP.NET MVC Framework and I can get the icons module working.
I have followed the integration steps for Angular but I get the following error:
"originalErr: SyntaxError: expected expression, got '<'
message: "expected expression, got '<'\n Evaluating http://localhost:63082/angular-feather.js\n Evaluating http://localhost:63082/AppClient/app/icons/icons.module.js\n "
I believe the problem can be solved with the mapping defined in the systemjs.config.js file but I have found the way to properly reference it.
I tried:

map: {
// our app is within the app folder
'app': '/AppClient/app',

   .
   .

    'angular-feather.js':'npm:angular-feather/angular-feather.js',

  },

but it's not working.

I hope you can help.
Thanks

systemjs.config.zip

Can't apply global styles to <i-feather> component

Because the <i-feather> component applies default styling, you cannot apply a global style to icons. Styles have to be applied locally, which is redundant if attempting to provide common style details to all icons in the application. For example, if I want all icons to be 50x50, I must create a component level class for each component using an icon.

Is there a suggested work around for this?

Unexpected Module

Hey, I am trying to use your module with a current Angular 5 and I am getting the following problem:

Unexpected module 'IconCamera' declared by the module 'IconsModule'. Please add a @Pipe/@Directive/@Component annotation.

I reproduced it with a new stackblitz with current angular modules and I am pretty new to angular, so I have no idea right now, what could have changed.

https://stackblitz.com/edit/angular-i834ks?file=app%2Ficons%2Ficons.module.ts

Unexpected value 'FeatherModule' when developing unit tests

Trying to make unit tests for my components that use . For this to work I need to import the FeatherModule. But when running the unit tests I keep getting the following error:

Unexpected value 'FeatherModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

      at verifySemanticsOfNgModuleDef (../packages/core/src/render3/jit/module.ts:200:13)
      at ../packages/core/src/render3/jit/module.ts:211:5
          at Array.forEach (<anonymous>)
      at verifySemanticsOfNgModuleDef (../packages/core/src/render3/jit/module.ts:209:58)
      at Function.get (../packages/core/src/render3/jit/module.ts:169:13)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.applyProviderOverridesToModule (../packages/core/testing/src/r3_test_bed_compiler.ts:414:49)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.compileTestModule (../packages/core/testing/src/r3_test_bed_compiler.ts:677:10)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.finalize (../packages/core/testing/src/r3_test_bed_compiler.ts:245:10)
      at TestBedRender3.get (../packages/core/testing/src/r3_test_bed.ts:380:43)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.inject (../packages/core/testing/src/r3_test_bed.ts:278:25)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:335:40)
      at Function.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:182:33)
      at projects/pig-settings-library/src/lib/components/employee/employee.component.spec.ts:69:23
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

I also tried to add a IconModule and import that one to my unit test but got the same result.

This is my Unit test setup code:

  let component: EmployeeComponent;
  let fixture: ComponentFixture<EmployeeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [EmployeeComponent, DataGridComponent, CustomLoadingComponent],
      imports: [CommonModule, AgrovisionAngularSharedModule, HttpClientTestingModule, IconsModule, ...materialModules],
      providers: [
        { provide: EmployeeService, useValue: mockEmployeeService },
        { provide: ColumnBuilderService, useValue: mockColumnBuilderService },
        { provide: TranslationService, useValue: mockTranslationService },
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(EmployeeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

Currently using version 6.2.0 because 6.3.0 is not working for me cause of my Angular version.
Anyone know a solution for this?

Problem with last update

After the last update my console is warning with this

Icon not found: package (or orthers icon names)

I already updated to 6.0.1

Style the icon's SVG?

I'm trying to get a feather icon responsive in terms of its height with 'height: 100%'. However, that doesn't work since the child SVG is hardcoded to 24px.

It works if I enter the dev tools and manually change the SVG's height to 100% as well as its parent. But it seems like the SVG is loaded after the stylesheets or similar, which makes it so the SVG's styling isn't applied.

Are there any examples of dynamic sizes? The demo only demonstrates hardcoded values.

Thanks!

No suitable injection token for parameter 'elem' of class 'FeatherComponent'

0% compiling
Compiling angular-feather : es2015 as esm2015

ERROR in No suitable injection token for parameter 'elem' of class 'FeatherComponent'.
no type or decorator

Dependency

{
"name": "angular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.14",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/pwa": "^0.803.26",
"@angular/router": "^8.2.14",
"@angular/service-worker": "^8.2.14",
"@types/c3": "^0.7.4",
"angular-feather": "^6.0.2",
"angular-font-awesome": "^3.1.2",
"c3": "^0.7.15",
"chart.js": "^2.9.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"ng2-charts": "^2.3.0",
"ngx-csv": "^0.3.2",
"rxjs": "~6.4.0",
"tslib": "^1.11.1",
"xlsx": "^0.15.6",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.26",
"@angular/cli": "^8.3.26",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@types/file-saver": "^2.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.3",
"protractor": "^5.4.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

Missing Icons

Hi, can you please add the missing icons divide, divide-circle and divide-square?

Can't use programmatically

Let say we have menu which consist of items with icon and text. By angular concepts we should define array of objects that represents each menu item. Then we go through this items in *ngFor loop and print items one by one.

<button menuClose ion-item detail-none *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon [name]="p.icon"></ion-icon>
        {{p.title}}
</button>

How we should implement this behaviour with angular-feather? ngSwitch?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.