Skip to content
This repository has been archived by the owner on Jan 3, 2023. It is now read-only.

Commit

Permalink
Migrate symbols
Browse files Browse the repository at this point in the history
  • Loading branch information
emclaug2 committed Jul 9, 2021
0 parents commit 4aa94af
Show file tree
Hide file tree
Showing 121 changed files with 4,428 additions and 0 deletions.
64 changes: 64 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
version: 2
jobs:
build:
docker:
- image: circleci/node:12.6-browsers
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-
- run:
name: Install Dependencies
command: |
yarn install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run:
name: Build Packages
command: yarn build
- run:
name: Verify SVG Build Artifacts
command: yarn test:svg
- persist_to_workspace:
root: .
paths:
- symbols

publish:
docker:
- image: circleci/node:12.9.1-browsers
steps:
- checkout
- attach_workspace:
at: .
- run:
name: Authenticate with registry
command: |
echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc
- run:
name: Publish @pxblue/icons
command: yarn publish:package -b $CIRCLE_BRANCH
- run:
name: Publish @pxblue/symbols
command: cd symbols && yarn publish:package -b $CIRCLE_BRANCH
- run:
name: Publish @pxblue/icons-svg
command: cd svg && yarn publish:package -b $CIRCLE_BRANCH
workflows:
version: 2
icons:
jobs:
- build
- publish:
requires:
- build
filters:
branches:
only:
- master
- dev
28 changes: 28 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.

# dependencies
/node_modules
**/**/node_modules
package-lock.json


# testing
/coverage

# production
/build
/tmp

# misc
.DS_Store
**/**/.DS_Store
**/**/Thumbs.db
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
/.idea/
1 change: 1 addition & 0 deletions CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* @huayunh @joebochill @emclaug2
28 changes: 28 additions & 0 deletions PUBLISHING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Publishing Instructions

## Automatic Publishing

This package is published to NPM automatically by CircleCI when code is merged into the `dev` or `master` branches. To publish a new version, simply update the version in `package.json` and merge your code into the appropriate branch.
- The `dev` branch will publish versions marked as `alpha` or `beta`.
- The `master` branch will publish any version (`alpha`, `beta`, or `latest`).
In both cases, the code will only be published if the version number differs from the current version published under the respective dist tag.

## Manually Publishing

If you need to publish a package manually, you can run the following commands from the root folder:

### @pxblue/symbols
```
cd symbols
yarn publish:package
```

The publishing script will look at the version in the `package.json` and automatically determine whether to publish an alpha, beta, or latest package.

For this command to work, you must have an NPM token configured in your environment variables or you can perform a login prior to executing the publish command via:

```sh
npm adduser && yarn publish:package
```

> Publishing manually should only be done for `alpha` or `beta` packages. The command will work for `latest` packages, but this should be avoided except in rare situations where the automatic publishing functionality is not working in CircleCI.
77 changes: 77 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# PX Blue Supplemental Icons

[![](https://img.shields.io/npm/v/@pxblue/icons.svg?label=@pxblue/icons&style=flat)](https://www.npmjs.com/package/@pxblue/icons)
[![](https://img.shields.io/npm/v/@pxblue/icons-svg.svg?label=@pxblue/icons-svg&style=flat)](https://www.npmjs.com/package/@pxblue/icons-svg)
[![](https://img.shields.io/npm/v/@pxblue/ng-progress-icons.svg?label=@pxblue/ng-progress-icons&style=flat)](https://www.npmjs.com/package/@pxblue/ng-progress-icons)
[![](https://img.shields.io/npm/v/@pxblue/react-progress-icons.svg?label=@pxblue/react-progress-icons&style=flat)](https://www.npmjs.com/package/@pxblue/react-progress-icons)
[![](https://img.shields.io/npm/v/@pxblue/symbols.svg?label=@pxblue/symbols&style=flat)](https://www.npmjs.com/package/@pxblue/symbols)
[![](https://img.shields.io/circleci/project/github/pxblue/icons/master.svg?style=flat)](https://circleci.com/gh/pxblue/icons/tree/master)

This is a library of supplemental icons, to be used in conjunction with the standard Material Design icons in PX Blue applications.

## Installation

To install the PX Blue icon font from NPM as a dependency for your project, you can run one of the following commands in your project root:

```
npm install --save @pxblue/icons
or
yarn add @pxblue/icons
```

You then need to reference the font in your application so that it is available for use.

#### Angular

In order to use the icon font, you will need to modify your angular.json file "styles" entries (there is one under "build" and one under "test") to include the icon font reference:

```
"styles": [
"src/styles.scss",
"./node_modules/@pxblue/icons/iconfont/PXBlueIcons.css"
],
```

#### React

For React, you'll need to require the font in your top-level JS file (typically index.js).

```
require('@pxblue/icons/iconfont/PXBlueIcons.css');
```

## Using the icon font in your application

This will make the PX Blue icons available to your code by using the appropriate class name (className for React) on a `<i>` element, e.g.:

```
<i class="pxb-ICONNAME"></i>
```

### Applying Different Colors

To change the color of the icon you are using, simply set the CSS color property. This property is inheritable, so if the property is not set on your icon, it will be inherited from the parent container.

```
<i class="pxb-ICONNAME" style="color: red"></i>
```

### Available Icons

See the [Iconography](https://pxblue.github.io/style/iconography) on pxblue.github.io for a list of currently available icons.

## Usage Alternatives

The icon font is a great way to include lots of icons in your application. If you only need a few, you can also check out these alternative packages:

- [SVG Icons](https://www.npmjs.com/package/@pxblue/icons-svg)
- [React Components](https://www.npmjs.com/package/@pxblue/icons-mui)

We also have PX Blue oneline symbols (ported from PX Blue 1.0) available:

- [SVG Symbols](https://www.npmjs.com/package/@pxblue/symbols)
- [React Components](https://www.npmjs.com/package/@pxblue/symbols-mui)

# For Icon Creators

Please read the instructions in the [Design](https://github.com/pxblue/icons/blob/master/design/README.md) folder before creating or submitting new icons.
108 changes: 108 additions & 0 deletions available_symbols.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
# Available Symbols
Currently, we have symbols available for:
* accessory
* add
* alert
* ammeter
* arms
* ats
* battery
* battery_caution
* battery_empty
* battery_full
* battery_symbol
* bi_metallic_ol
* breaker_face
* breaker_fandle
* buttons
* capacitor
* capacitor_with_bus
* carbon_monoxide_base
* carbon_monoxide_node
* chiller_base
* circle
* compartment
* compartment_light
* contactor
* conveyor
* current_transformer
* current_transformer_with_bus
* data_center
* default
* disconnected_breaker
* drawout
* drawout_fuse
* drive
* edr
* fan
* feeder
* fuse
* fusible_switch
* generator
* ground
* hcu
* hrg_base
* hrg_node
* hvac
* hydro
* iO
* leaf
* led
* light_bulb
* low_voltage_breaker
* low_voltage_drawout_breaker
* magnetic_ol
* mcc
* medium_voltage_breaker
* medium_voltage_drawout_breaker
* meter
* meter_face
* motor
* motor_starter
* nuclear
* oneline
* other
* outlet
* panel_door
* pdu
* placeholder_rectangle
* placeholder_square
* potential_transformer
* ppe
* provisional_breaker
* pump
* pxg
* rectangle
* relay
* relay_face
* remote
* remote_racking
* remote_racking_rect
* remove
* running
* running_reversed
* sensor
* skull
* soft_starter
* solar
* source
* spd
* ssol
* stopped
* sun
* switch
* switchgear
* switchgear_dashboard
* switchgear_dashboard_light
* switchgear_light
* toggle
* touchscreen_large
* touchscreen_small
* tower
* transformer
* trip_unit
* trip_unit_face
* ups
* vfd
* water_pump
* wind
39 changes: 39 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"name": "@pxblue/symbols",
"version": "0.0.0",
"repository": {
"type": "git",
"url": "git+https://github.com/pxblue/symbols.git"
},
"author": "PX Blue <[email protected]>",
"license": "BSD-3-Clause",
"scripts": {
"test:svg": "./scripts/svgBuildTest.sh",
"build": "create-svg-sprite --optimize --input './symbols/svg' --output './symbols' --name 'symbols'"
},
"files": [
"iconfont",
"LICENSE",
"package.json",
"README.md",
"CHANGELOG.md"
],
"bugs": {
"url": "https://github.com/pxblue/icons/issues"
},
"homepage": "https://github.com/pxblue/icons#readme",
"prettier": "@pxblue/prettier-config",
"devDependencies": {
"@pxblue/prettier-config": "^1.0.3",
"copyfiles": "^2.1.0",
"create-svg-sprite": "~1.0.4",
"icon-font-generator": "^2.1.8",
"prettier": "^2.2.1",
"yarn-audit-fix": "^3.2.7"
},
"keywords": [
"icons",
"material",
"pxblue"
]
}
24 changes: 24 additions & 0 deletions scripts/svgBuildTest.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
#!/bin/bash
RED='\033[0;31m'
GREEN='\033[0;32m'
GRAY='\033[1;30m'
NC='\033[0m' # No Color

echo -n "Checking for symbols folder... "
if [ ! -d ./symbols ]; then echo -e "${RED}Not Found${NC}" && exit 1; fi
if [ ! -s ./symbols ]; then echo -e "${RED}Directory Empty${NC}" && exit 1; else echo -e "${GREEN}Found${NC}"; fi
echo "Checking for required files..."
echo -ne " symbols sprite: "
if [ ! -f ./symbols/symbols.svg ]; then echo -e "${RED}Not Found${NC}" && exit 1; else echo -e "${GREEN}Found${NC}"; fi
echo -ne " package.json: "
if [ ! -f ./symbols/package.json ]; then echo -e "${RED}Not Found${NC}" && exit 1; else echo -e "${GREEN}Found${NC}"; fi
echo -ne " readme: "
if [ ! -f ./symbols/readme.md ] && [ ! -f ./symbols/Readme.md ] && [ ! -f ./symbols/README.md ]; then echo -e "${RED}Not Found${NC}" && exit 1; else echo -e "${GREEN}Found${NC}"; fi
echo -ne " metadata (optional): "
if [ ! -f ./symbols/index.json ]; then echo -e "${GRAY}Not Found${NC}"; else echo -e "${GREEN}Found${NC}"; fi

echo -e "\r\n${GREEN}----------------------------------"
echo -e "SVG artifacts successfully created"
echo -e "----------------------------------${NC}\r\n\r\n"

exit 0
Empty file added symbols/CHANGELOG.md
Empty file.
Loading

0 comments on commit 4aa94af

Please sign in to comment.