Verified Commit 14a53329 authored by Raphael Ochsenbein's avatar Raphael Ochsenbein
Browse files

Initial commit

parents
Pipeline #1036 passed with stages
in 3 minutes and 26 seconds
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# profiling files
chrome-profiler-events.json
speed-measure-plugin.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db
# Generated Code
projects/font-awesome-icons-lib/src/lib/icons/
# Documentation
# https://docs.gitlab.com/ee/ci/yaml/
stages:
- test
- deploy
test:
stage: test
before_script:
- git submodule sync --recursive
- git submodule update --init --recursive
- nvm i
- npm i
script:
- npm run lint
- npm run build:lib
- npm run test
- npm run build:app
artifacts:
paths:
- dist/font-awesome-icons/
- dist/example-app/
expire_in: 1337 mins
deploy_master:
stage: deploy
script:
- rsync --delete -rlvvzhe ssh $CI_PROJECT_DIR/dist/example-app/ akehir@192.168.7.111:/app/web/projects/font-awesome-icons/master/ # syncronize from build server to local via rsync
- nvm i
- echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}'>~/.npmrc
- cd $CI_PROJECT_DIR/dist/font-awesome-icons
- npm publish --access public
- rm -f ~/.npmrc
after_script:
- rm -f ~/.npmrc
only:
- master
[submodule "lib/fontawesome"]
path = lib/fontawesome
url = https://github.com/FortAwesome/Font-Awesome.git
12.15.0
# Contributing
When contributing to this repository, please first discuss the change you wish to make via issue,
email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct, please follow it in all your interactions with the project.
## Pull Request Process
1. Ensure any install or build dependencies are removed before the end of the layer when doing a
build.
2. Update the README.md with details of changes to the interface, this includes new environment
variables, exposed ports, useful file locations and container parameters.
3. Increase the version numbers in any examples files and the README.md to the new version that this
Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
4. You may merge the Pull Request in once you have the sign-off of one other developer, or if you
do not have permission to do that, you may request the reviewer to merge it for you.
## 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 `raphael@ochsenbe.in`. 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/
MIT License
Copyright (c) 2019 Akehir (Raphael Ochsenbein)
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.
# Angular Lazy Loaded SVG Icons Library with FontAwesome Icons
Use the cool icons from FontAwesome in your app, fully tree-shaked and only loaded when necessary. Injected into the dom, and therefore IE compatible.
## Live Demo
The live demo can be found at https://font-awesome-icons.akehir.com.
## Getting Started
If you just want to use the library, follow the following 4 simple steps. For contributing, or building the library locally, see the section on [building](#building) the library.
Supported Angular Versions
| Angular Version | Password Checker Version |
| --------------- | ------------------------ |
| 9.x | 1.0.0 |
### Step 1: Install
Install the npm package.
```
npm i @triangular/font-awesome-icons
```
### Step 2: Add to NgModule Imports
Then, add the __FontAwesomeIconsModule__ to the imports of your module(s).
```typescript
import { NgModule } from '@angular/core';
import { FontAwesomeIconsModule } from '@triangular/font-awesome-icons';
@NgModule({
declarations: [
],
imports: [
FontAwesomeIconsModule,
],
providers: [],
bootstrap: [],
})
export class AppModule { }
```
### Step 3: Register the Icons in the Registry
The tree-shaking magic happens when you import icons from __@triangular/font-awesome-icons/icons__ and register them in the __FontAwesomeIconsRegistry__. By explicitly importing the icons where they are required, the tree shaking can ensure they are loaded when they are needed. If an icon is not required, it will not be bundled in your application. If an icon is required in a feature module, it will be bundled with the feature module. And if the icon is bundled in multiple feature modules, it will be bundled with the common bundle - in order to not download the same icon multiple times.
```typescript
import { Component } from '@angular/core';
import { FontAwesomeIconsRegistry } from '@triangular/font-awesome-icons';
import {
fontAwesomeIconAnkh,
// add more icons here
} from '@triangular/font-awesome-icons/icons';
@Component({
selector: 'app-some-component-with-icons',
template: '<font-awesome-icon name="ankh"></font-awesome-icon>',
styles: 'svg { color: #ccc; fill: currentColor; width: 5rem; height: 5rem; }',
})
export class SomeComponentWithIcons {
constructor(private registry: FontAwesomeIconsRegistry) {
registry.registerIcons([
fontAwesomeIconAnkh,
// add more icons here
]);
}
}
```
### Step 4: Enjoy using the Icons with a Peace of Mind
Once an icon has been registered, it can simply be used in your template. If you get the error `can't bind to 'name' since it isn't a known property of 'font-awesome-icon'`, you need to include the __FontAwesomeIconsModule__ in your module.
```html
<font-awesome-icon name="ankh"></font-awesome-icon>
```
## Building
As a pre-requisite to build the library, you need to install all the dependencies via `npm install` or `yarn`.
Furthermore, you will need to sync the projects submodules `git submodule sync --recursive` and `git submodule update --init --recursive`.
### Building the Library
Before the sample app can be run, you need to build the library itself.
```
npm run build:lib
```
### Building the Sample App
After building the library, it is either possible to build the sample app, via
```
npm run build:app
```
,or to run the sample app with a local dev server:
```
npm run start:app
```
### Checking the bundle of the Sample App
You can verify how the application is bundled with the following command:
```
npm run analyze
```
## Running the tests
### Unit Tests
There are not many tests, but those that are can be run with:
```
npm run test -- --no-watch --progress=false --code-coverage --browsers ChromeHeadless
```
### And coding style tests
The project follows the [angular style guide](https://angular.io/guide/styleguide) and lints with the following command:
```
npm run lint
```
## Built With
* [Angular](https://github.com/angular/angular) - The web framework used
* [NPM](https://www.npmjs.com/) - Dependency Management
* [Gitlab](https://git.akehir.com) - Source Control & CI Runner
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning.
### Version History
- 1.0.0: Initial Release
## Authors
* **Raphael Ochsenbein** - *Initial work* - [Akehir](https://github.com/akehir)
See also the list of [contributors](https://github.com/akehir/font-awesome-icons/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* [FontAwesome (FortAwesome)](https://github.com/FortAwesome/Font-Awesome) for creating the awesome icon library
* [Kevin Kreuzer (kreuzerk)](https://medium.com/angular-in-depth/how-to-create-a-fully-tree-shakable-icon-library-in-angular-c5488cf9cd76) For creating a tutorial and package for creating a lazy loaded angular library
* [Todd Palmer](https://indepth.dev/creating-a-library-in-angular-6-using-angular-cli-and-ng-packagr/) for a tutorial for creating an angular library
* [PurpleBooth](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2/) for the readme template
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"font-awesome-icons-lib": {
"root": "projects/font-awesome-icons-lib",
"sourceRoot": "projects/font-awesome-icons-lib/src",
"projectType": "library",
"prefix": "font-awesome",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/font-awesome-icons-lib/tsconfig.lib.json",
"project": "projects/font-awesome-icons-lib/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/font-awesome-icons-lib/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/font-awesome-icons-lib/src/test.ts",
"tsConfig": "projects/font-awesome-icons-lib/tsconfig.spec.json",
"karmaConfig": "projects/font-awesome-icons-lib/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/font-awesome-icons-lib/tsconfig.lib.json",
"projects/font-awesome-icons-lib/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"example-app": {
"root": "projects/example-app/",
"sourceRoot": "projects/example-app/src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/example-app",
"index": "projects/example-app/src/index.html",
"main": "projects/example-app/src/main.ts",
"polyfills": "projects/example-app/src/polyfills.ts",
"tsConfig": "projects/example-app/tsconfig.app.json",
"assets": [
"projects/example-app/src/favicon.ico",
"projects/example-app/src/assets"
],
"styles": [
"projects/example-app/src/styles.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"es5": {
"tsConfig": "./projects/example-app/tsconfig-es5.app.json",
"sourceMap": true,
"extractCss": false,
"namedChunks": true,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"production": {
"tsConfig": "projects/example-app/tsconfig.app.prod.json",
"fileReplacements": [
{
"replace": "projects/example-app/src/environments/environment.ts",
"with": "projects/example-app/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "example-app:build"
},
"configurations": {
"production": {
"browserTarget": "example-app:build:production"
},
"es5": {
"browserTarget": "example-app:build:es5"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "example-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/example-app/src/test.ts",
"polyfills": "projects/example-app/src/polyfills.ts",
"tsConfig": "projects/example-app/tsconfig.spec.json",
"karmaConfig": "projects/example-app/karma.conf.js",
"styles": [
"projects/example-app/src/styles.css"
],
"scripts": [],
"assets": [
"projects/example-app/src/favicon.ico",
"projects/example-app/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/example-app/tsconfig.app.json",
"projects/example-app/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"example-app-e2e": {
"root": "projects/example-app-e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "projects/example-app-e2e/protractor.conf.js",
"devServerTarget": "example-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "example-app:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "projects/example-app-e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "font-awesome-icons-lib"
}
Subproject commit 4e6402443679e0a9d12c7401ac8783ef4646657f
This diff is collapsed.
{
"name": "font-awesome-icons",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:app": "ng serve --project example-app --host 0.0.0.0 --aot",
"start:app:ie": "ng serve --project example-app --host 0.0.0.0 --aot --configuration es5",
"build": "npm run build:lib && npm run build:app",
"build:app": "ng build example-app --prod --progress=false",
"build:lib": "npm run build:lib:pre && ng build font-awesome-icons-lib --prod && npm run build:lib:post",
"build:lib:pre": "npm run icons",
"build:lib:post": "cpx 'projects/font-awesome-icons-lib/src/lib/icons/**/*.{d.ts,js}' dist/font-awesome-icons/icons",
"test": "npm run test:lib && npm run test:example",
"test:lib": "ng test font-awesome-icons-lib --no-watch --progress=false --code-coverage --browsers ChromeHeadless",
"test:example": "ng test example-app --no-watch --progress=false --code-coverage --browsers ChromeHeadless",
"icons": "svg-to-ts -s /*.svg -o -f icons",
"analyze": "ng build example-app --prod --stats-json && webpack-bundle-analyzer ./dist/example-app/stats-es2015.json",
"lint": "ng lint",
"e2e": "ng e2e example-app",
"postversion": "git push --follow-tags"
},
"private": true,
"svg-to-ts": {
"srcFiles": [
"./lib/fontawesome/svgs/solid/**/*.svg",
"./lib/fontawesome/svgs/brands/**/*.svg"
],
"outputDirectory": "./projects/font-awesome-icons-lib/src/lib/icons",
"interfaceName": "FontAwesomeIcon",
"typeName": "fontAwesomeIcon",
"prefix": "fontAwesomeIcon",
"optimizeForLazyLoading": true,
"compileSources": true
},
"dependencies": {
"@angular/animations": "~9.1.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/forms": "~9.1.0",
"@angular/platform-browser"