Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carbon-design-system/carbon-icons-angular
Carbon icons, in Angular!
https://github.com/carbon-design-system/carbon-icons-angular
Last synced: 4 months ago
JSON representation
Carbon icons, in Angular!
- Host: GitHub
- URL: https://github.com/carbon-design-system/carbon-icons-angular
- Owner: carbon-design-system
- Created: 2019-11-07T18:36:19.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T02:33:23.000Z (over 1 year ago)
- Last Synced: 2024-04-14T06:07:37.933Z (7 months ago)
- Language: JavaScript
- Homepage: https://carbon-icons-angular.netlify.com
- Size: 2.48 MB
- Stars: 18
- Watchers: 6
- Forks: 19
- Open Issues: 67
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ibmcloud - carbon-icons-angular - Carbon icons, in Angular! (Carbon Design System)
README
# :stop_sign: @carbon/icons-angular - DEPRECATED :stop_sign:
This library is deprecated in favor of [`@carbon/icons`](https://www.npmjs.com/package/@carbon/icons).
@carbon/icons is the main icons package for Carbon Design System, hence you'll get updates as soon as they are made.
Additionally, the unpacked size is significantly lower, 38MB compared to 148MB.
To get started with @carbon/icons check out the
[code sandbox demo](https://codesandbox.io/s/gracious-diffie-7khcp3?file=/src/app/app.module.ts).
There are comments added to files to guide you through the usage. The relevant files to look at are:
* [app.module.ts](https://codesandbox.io/s/gracious-diffie-7khcp3?file=/src/app/app.module.ts)
* [app.component.html](https://codesandbox.io/s/gracious-diffie-7khcp3?file=/src/app/app.component.html)
* [typings.d.ts](https://codesandbox.io/s/gracious-diffie-7khcp3?file=/src/typings.d.ts)
---------------------------------------------------------------------------------
> Angular components for icons in digital and software products using the Carbon
> Design System
## Getting started
To install `@carbon/icons-angular` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):
```bash
npm install -S @carbon/icons-angular
```
If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
instead:
```bash
yarn add @carbon/icons-angular
```
## Usage
Icons in this package support the following sizes: `16`, `20`, `24`, and `32`
pixels. These sizes refer to the width and height of the icon. To reduce bundle
sizes each icon is exported as it's own module, you can use an icon component in
your project by doing the following:
In your module:
```ts
import { AddModule } from '@carbon/icons-angular';
@NgModule({
// ...
imports: [
// ...
AddModule,
// ...
],
// ...
})
export class MyModule {}
```
In your component template:
```html
```
### Migration notes
Previously (all `v10` versions) a pattern like the following was required
```ts
import { Add32Module } from '@carbon/icons-angular/lib/add/32.js';
@NgModule({
// ...
imports: [
// ...
Add32Module,
// ...
],
// ...
})
export class MyModule {}
```
This is no longer supported. All icon module imports must switch to the format outlined above.
### API
Options available to the icon directive or component:
[#](#size) **`@Input() size: string;`**
Choses the size of the component.
Example:
```html
```
[#](#innerClass) **`@Input() innerClass: string;`**
Applies a `classList` to the inner SVG. Use the normal `class` attribute to
apply classes to the host element.
Example:
```html
```
would result in
```html
```
[#](#ariaLabel) **`@Input() ariaLabel: string;`**
If supplied, should provide an accessible description of the icon.
Example:
```html
```
[#](#ariaLabelledby) **`@Input() ariaLabelledby: string;`**
If supplied, should link to an element providing an accessible description of
the icon.
Example:
```html
Add a new item
```
[#](#ariaHidden) **`@Input() ariaHidden: boolean;`**
Controls the visibility of the underlying SVG to screen readers.
Example:
```html
```
[#](#title) **`@Input() title: string;`**
Adds a `` element to the inner SVG. Most browsers will display this text
as a tooltip when the icon is hovered.
Example:
```html
```
[#](#focusable) **`@Input() focusable: boolean;`**
Enables or disables the `focusable` attribute. Set this to explicitly control
whether the underlying element should receive focus. Defaults to `false` in most
cases.
Example:
```html
```
## 🙌 Contributing
We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
## 📝 License
Licensed under the [Apache 2.0 License](/LICENSE).