Skip to content
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs-src
icons
public
.gitignore
LICENSE
README.md
babel.config.js
deploy.js
package-lock.json
package.json
vue.config.js

README.md

icons

Summary

@rei/cedar-icons is home to the raw svg files that conform to REI's Iconography guidelines

Getting Started

Installation

npm install @rei/cedar-icons

Use

@rei/cedar-icons exposes an object that has the following structure:

{
  <icon-set>: {
    <icon-name>: <SVG String>
  }
}

for example:

{
  ea: {
    camping: "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>"
  }
}

TODO: Notes about Vue/Cedar

Creating a custom sprite

Via CLI

@rei/cedar-icons provides a command-line interface for creating/editing a SVG symbol definition file.

npx icon-sprite will start the CLI. Follow the instructions to create your customized sprite.

NOTE: If you are editing an existing sprite via the CLI it will only look for icons currently in the repo and anything not found within will be excluded from the output file (this may change with a future feature update).

From within the repo

npm run sprite will function the same as above.

SVGs

Source svg files are found in icons/

"Docs" view

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build
You can’t perform that action at this time.