Socket
Socket
Sign inDemoInstall

@alaskaairux/icons

Package Overview
Dependencies
Maintainers
1
Versions
101
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@alaskaairux/icons - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

25

.github/ISSUE_TEMPLATE/new-icon.md

@@ -6,3 +6,2 @@ ---

labels: 'Status: Proposal'
assignees: blackfalcon

@@ -13,9 +12,25 @@ ---

> Please list the icon(s) that need to be added to the library
> Please fill out the table below with the desired information per icon
1. ...
1. ...
<!-- see the table below for a list of available categories
| category | description |
|-----------|-------------|
| alert | Icons used specifically to alert users as to the state of awareness |
| in-flight | icons reserved for 'day of travel' user experiences |
| interface | Icons used to create interface enhancements |
| payment | Icons specifically to be used in a transaction flow |
| shop | icons for use with shopping experiences |
| social | Icons for use with social media |
| terminal | Icons related to terminal experiences |
-->
| name | category | description |
|---|---|---|
| <!-- icon name --> | <!-- icon category --> | <!-- icon description --> |
## Icon art
<!-- To check off a box, simply add an 'x' within the square brackets -->
<!-- - [x] ... -->
> The icon(s) per this request, has the new art been completed?

@@ -26,3 +41,3 @@

> If YES, does the new icon art follow all the recomendations from the [Auro Icon Design Guidlines](https://auro.alaskaair.com/foundations/iconography/design-guidelines)?
> If YES, does the new icon art follow all the recommendations from the [Auro Icon Design Guidelines](https://auro.alaskaair.com/foundations/iconography/design-guidelines)?

@@ -29,0 +44,0 @@ - [ ] Yes

# Semantic Release Automated Changelog
## [3.1.1](https://github.com/AlaskaAirlines/Icons/compare/v3.1.0...v3.1.1) (2020-04-20)
### Bug Fixes
* update docs to clearify new work ([cf64cf4](https://github.com/AlaskaAirlines/Icons/commit/cf64cf4d2b93ae4559b74733afee7f2087a18872))
# [3.1.0](https://github.com/AlaskaAirlines/Icons/compare/v3.0.0...v3.1.0) (2020-04-16)

@@ -4,0 +11,0 @@

2

package.json
{
"name": "@alaskaairux/icons",
"description": "Alaska Air and Auro Design System Icons",
"version": "3.1.0",
"version": "3.1.1",
"main": "dist/index.js",

@@ -6,0 +6,0 @@ "author": "Alaska Design and Research",

@@ -1,2 +0,2 @@

[![Build Status](https://travis-ci.org/AlaskaAirlines/OrionIcons.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/OrionDesignTokens)
[![Build Status](https://travis-ci.org/AlaskaAirlines/Icons.svg?branch=master)](https://travis-ci.org/AlaskaAirlines/OrionDesignTokens)
![npm (scoped)](https://img.shields.io/npm/v/@alaskaairux/icons.svg?color=orange)

@@ -9,6 +9,2 @@ ![NPM](https://img.shields.io/npm/l/@alaskaairux/icons.svg?color=blue)

## Supported icons
All currently supported icons are located in the `icons/` directory.
## Install

@@ -55,12 +51,8 @@

This will inset the Token output within the scope of the shadow DOM Custom Element and render the appropriate values per the CSS Custom Properties.
This will insert the Token output within the scope of the shadow DOM Custom Element and render the appropriate values per the CSS Custom Properties.
In this case, Orion Icons are a direct dependency of the custom element.
#### Using Icon Properties outside the shadow DOM
It is not necessary to load the Icon CSS custom properties within the scope of the shadow DOM. As long as the variables are made available from the global scope of the project, the CSS custom properties will pierce the shadow DOM and style the icons.
When using an icon, it is not necessary to load the Icon CSS custom properties within the scope of the shadow DOM. As long as the variables are made available from the global scope of the project, the CSS custom properties will pierce the shadow DOM and style the icons.
In this case, the Orion Icons should be noted as a peer dependency with install instructions at the global level.
## Categories

@@ -72,10 +64,10 @@

|---|---|
| alert |Icons used specifically to alert users as to the state of awareness|
| interface |Icons used to create interface enhancements|
|payment|Icons specifically to be used in a transaction flow|
|social|Icons for use with social media|
|terminal|Icons related to terminal experiences|
| alert | Icons used specifically to alert users as to the state of awareness |
| in-flight | icons reserved for 'day of travel' user experiences |
| interface | Icons used to create interface enhancements |
| payment | Icons specifically to be used in a transaction flow |
| shop | icons for use with shopping experiences |
| social | Icons for use with social media |
| terminal | Icons related to terminal experiences |
For the purposes of backwards compatibility, legacy icons will **NOT** be categorized and deprecated.
## Node application dependency

@@ -233,9 +225,2 @@

### Angular SVG Icon
For use with Angular projects, `angular-svg-icon` renders a component that will render the SVG inline from the designated resource location.
See [angular-svg-icon](https://www.npmjs.com/package/angular-svg-icon) for more information.
## Adding Icons

@@ -287,2 +272,3 @@

| category | string | | Defines categorical placement of the icon |
| desc | string | | The `<desc>` element provides an accessible, long-text description of any SVG |

@@ -293,4 +279,8 @@ #### Optional attributes for each SVG

|---|---|---|---|
| desc | string | | The `<desc>` element provides an accessible, long-text description of any SVG |
| title | string | | The `<title>` element provides an accessible, short-text description of any SVG, may appear as a tool-tip in the browser; can be derived from the file name |
The `title` attribute is needed when you may want a simpler name than the file name. In the example data below, there is the `information-stroke.svg`, but the name `information-stroke` is meaningless if rendered to the browser. Updating the title to simply be `information` will address that.
#### Example data
```javascript

@@ -313,13 +303,11 @@ {

{
"name": "close",
"desc": "Option to close current experience",
"width": "var(--auro-size-md)",
"height": "var(--auro-size-md)",
"style": "ico_squareMed",
"viewBox": "0 0 48 48"
"name": "error",
"desc": "Error alert indicator",
"category": "alert"
},
{
"title": "Close",
"name": "close-lg",
"desc": "Option to close current experience"
"title": "Information",
"name": "information-stroke",
"desc": "Important information indicator",
"category": "alert"
}

@@ -326,0 +314,0 @@ ]

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc