Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@rei/cdr-icon
Advanced tools
@rei/cdr-icon - npm Package Compare versions
Comparing version 1.0.0-next.beta.3 to 1.0.0-next.beta.4
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrIcon",[],e):"object"==typeof exports?exports.CdrIcon=e():t.CdrIcon=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=3)}([function(t,e,n){"use strict";var o=n(1);e.a=o.a},function(t,e,n){"use strict";var o=n(7);e.a={name:"CdrIcon",mixins:[o.a],props:{use:String},computed:{baseClass:function(){return"cdr-icon"}}}},function(t,e){t.exports={"cdr-icon":"cdr-icon_1.0.0-next.beta.3","cdr-icon--sm":"cdr-icon--sm_1.0.0-next.beta.3","cdr-icon--lg":"cdr-icon--lg_1.0.0-next.beta.3","cdr-icon--inherit-color":"cdr-icon--inherit-color_1.0.0-next.beta.3"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(4);function r(t){t.component("cdr-icon",o.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(r),e.default=r},function(t,e,n){"use strict";var o=n(5),r=n(0),i=n(8),s=n(9);var c=Object(s.a)(r.a,o.a,o.b,!1,function(t){this.$style=i.default.locals||i.default},null,null);e.a=c.exports},function(t,e,n){"use strict";var o=n(6);n.d(e,"a",function(){return o.a}),n.d(e,"b",function(){return o.b})},function(t,e,n){"use strict";n.d(e,"a",function(){return o}),n.d(e,"b",function(){return r});var o=function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{class:[this.modifierClass],attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",role:"presentation"}},[this._t("default"),this._v(" "),this.use?e("use",{attrs:{href:""+this.use,"xlink:href":""+this.use}}):this._e()],2)},r=[]},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,e=this.baseClass,n=this.modifier?this.modifier.split(" "):[],o=[];return this.$style?(o.push(this.moduleClass(e)),o=o.concat(n.map(function(n){return t.modifyClassName(e,n)}))):(o.push(""+e),o=o.concat(n.map(function(n){return t.modifyClassName(e,n)}))),o.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,e){return this.$style?this.moduleClass(t+"--"+e):t+"--"+e}}}},function(t,e,n){"use strict";var o=n(2),r=n.n(o);e.default=r.a},function(t,e,n){"use strict";e.a=function(t,e,n,o,r,i,s,c){var u,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);o&&(a.functional=!0);i&&(a._scopeId="data-v-"+i);s?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=u):r&&(u=c?function(){r.call(this,this.$root.$options.shadowRoot)}:r);if(u)if(a.functional){a._injectStyles=u;var f=a.render;a.render=function(t,e){return u.call(e),f(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:a}}}])}); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CdrIcon",[],e):"object"==typeof exports?exports.CdrIcon=e():t.CdrIcon=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=3)}([function(t,e,n){"use strict";var o=n(1);e.a=o.a},function(t,e,n){"use strict";var o=n(7);e.a={name:"CdrIcon",mixins:[o.a],props:{use:String},computed:{baseClass:function(){return"cdr-icon"}}}},function(t,e){t.exports={"cdr-icon":"cdr-icon_1.0.0-next.beta.4","cdr-icon--sm":"cdr-icon--sm_1.0.0-next.beta.4","cdr-icon--lg":"cdr-icon--lg_1.0.0-next.beta.4","cdr-icon--inherit-color":"cdr-icon--inherit-color_1.0.0-next.beta.4"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(4);function r(t){t.component("cdr-icon",o.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(r),e.default=r},function(t,e,n){"use strict";var o=n(5),r=n(0),i=n(8),s=n(9);var c=Object(s.a)(r.a,o.a,o.b,!1,function(t){this.$style=i.default.locals||i.default},null,null);e.a=c.exports},function(t,e,n){"use strict";var o=n(6);n.d(e,"a",function(){return o.a}),n.d(e,"b",function(){return o.b})},function(t,e,n){"use strict";n.d(e,"a",function(){return o}),n.d(e,"b",function(){return r});var o=function(){var t=this.$createElement,e=this._self._c||t;return e("svg",{class:[this.modifierClass],attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",role:"presentation"}},[this._t("default"),this._v(" "),this.use?e("use",{attrs:{href:""+this.use,"xlink:href":""+this.use}}):this._e()],2)},r=[]},function(t,e,n){"use strict";e.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,e=this.baseClass,n=this.modifier?this.modifier.split(" "):[],o=[];return this.$style?(o.push(this.moduleClass(e)),o=o.concat(n.map(function(n){return t.modifyClassName(e,n)}))):(o.push(""+e),o=o.concat(n.map(function(n){return t.modifyClassName(e,n)}))),o.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,e){return this.$style?this.moduleClass(t+"--"+e):t+"--"+e}}}},function(t,e,n){"use strict";var o=n(2),r=n.n(o);e.default=r.a},function(t,e,n){"use strict";e.a=function(t,e,n,o,r,i,s,c){var u,a="function"==typeof t?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0);o&&(a.functional=!0);i&&(a._scopeId="data-v-"+i);s?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},a._ssrRegister=u):r&&(u=c?function(){r.call(this,this.$root.$options.shadowRoot)}:r);if(u)if(a.functional){a._injectStyles=u;var f=a.render;a.render=function(t,e){return u.call(e),f(t,e)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:a}}}])}); |
| { | ||
| "name": "@rei/cdr-icon", | ||
| "version": "1.0.0-next.beta.3", | ||
| "version": "1.0.0-next.beta.4", | ||
| "author": "REI Software Engineering", | ||
@@ -5,0 +5,0 @@ "description": "REI Cedar Style Framework - Vue Component for Icon", |
201
README.md
@@ -1,7 +0,88 @@ | ||
| # <span class="display-name">CdrIcon</span> | ||
| ## Props | ||
| ## 3 ways to use icons | ||
| `cdr-icon` can support 3 different ways of getting svg icons onto your page. | ||
| | name | type | default | | ||
| |:-----------------------------------------------------------------------|:-------|:--------| | ||
| | use | string | none | | ||
| | Sets the href attribute for use with SVG symbol sprite (CdrIconSprite). | | | | ||
| Applies to **CdrIcon** and all individual Cedar Icon* components | ||
| | name | type | default | | ||
| |:--------------------------------------------------------------------------|:-------|:-------------------| | ||
| | modifier | string | N/A | | ||
| | ~~Allows style variants to be defined. See below.~~ | | | | ||
| | Modifies the style variant for this component. Possible values: { ‘sm’, ‘md’, ‘lg’ } | | | | ||
| ## Slots | ||
| CdrIcon and all Icon* (IconArrowUp, IconCalendar, etc.) components have a default slot. | ||
| | name | notes | | ||
| |:--------|:----------------------------------------------------------------------------------------------| | ||
| | default | Sets the innerHTML of SVG element. This includes <title>, <desc>, or any other valid SVG xml. | | ||
| ## Installation | ||
| Resources are available within the [CdrIcon package](https://www.npmjs.com/package/@rei/cdr-icon): | ||
| - Component: `@rei/cdr-accordion` | ||
| - Component styles: `cdr-accordion.css` | ||
| <div class="cdr-stack--xl" /> | ||
| To incorporate the required assets for a component, use the following steps: | ||
| ### 1. Install using NPM | ||
| Install the CdrIcon package using `npm` in your terminal: | ||
| _Terminal_ | ||
| ```bash | ||
| npm i -S @rei/cdr-icon | ||
| ``` | ||
| ### 2. Import dependencies | ||
| _main.js_ | ||
| ```bash | ||
| // import your required css. | ||
| import '@rei/cdr-icon/dist/cdr-icon.css'; | ||
| ``` | ||
| ### 3. Add component to a template | ||
| _local.vue_ | ||
| ```vue | ||
| <template> | ||
| ... | ||
| <icon-arrow-down /> | ||
| ... | ||
| </template> | ||
| <script> | ||
| import { IconArrowDown } from '@rei/cdr-icon'; | ||
| export default { | ||
| ... | ||
| components: { | ||
| IconArrowDown | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| ## Usage | ||
| The **CdrIcon** package contains many different components: | ||
| 1. **CdrIcon** -- This is a basic SVG wrapper. This component allows for using Non-Cedar SVGs. Use this component in conjunction with the CdrIconSprite package | ||
| 2. **CdrIconSprite** -- A symbol definition sprite with all Cedar icons | ||
| 3. Individual icons -- For available icons, view [Cedar Icon Library](?active-tab=design-guidelines&active-link=icon-library) on Design Guidelines tab | ||
| There are 3 different options to display SVG icons on your page using the `CdrIcon` package. | ||
| ### 1. SVG Sprite | ||
@@ -11,12 +92,10 @@ | ||
| Requires: | ||
| Requires: | ||
| - Icon sprite inline on page | ||
| * Icon sprite inlined on page | ||
| #### Example: | ||
| The sprite needs to be available on any page where the icons are being used, so add the sprite component at the base layout or index: | ||
| The sprite needs to be available on any page where the icons will be used so it's best to do it at the base layout/index | ||
| _App.vue (base template)_ | ||
| ``` | ||
| // Base view template (assuming .vue and vue-router) | ||
| ```vue | ||
| <template> | ||
@@ -39,7 +118,22 @@ <div id="main"> | ||
| </script> | ||
| ``` | ||
| _Child.vue (any descendant component of App.vue above)_ | ||
| ```vue | ||
| <template> | ||
| <div> | ||
| <cdr-icon use="#caret-right" /> | ||
| </div> | ||
| </template> | ||
| // ----------------------------------------------------------------- | ||
| // Then in any descendant child component template | ||
| <cdr-icon use="#caret-right" /> | ||
| <script> | ||
| import { CdrIcon } from '@rei/cdr-icon'; | ||
| ... | ||
| components: { | ||
| CdrIcon | ||
| } | ||
| ... | ||
| </script> | ||
| ``` | ||
@@ -50,11 +144,9 @@ | ||
| Requires: | ||
| - `@rei/cdr-icon/sprite/cdr-icon-sprite.svg` | ||
| - A webpack loader to handle the asset. This example assumes the file-loader package | ||
| - A polyfill for external SVG resource. Possible packages are: svgxuse or svg4everybody | ||
| * @rei/cdr-icon/sprite/cdr-icon-sprite.svg | ||
| * A webpack loader to handle the asset (this example assumes `file-loader`) | ||
| * A polyfill for external svg resource. Possibly `svgxuse` or `svg4everybody` | ||
| Within an individual component (you can probably come up with a better way to scale this if you need to do it in a lot of places): | ||
| ``` | ||
| // A .vue file | ||
| Within an individual component (there may be a better way to scale this if the code calls it in many places): | ||
| ```vue | ||
| <template> | ||
@@ -80,17 +172,12 @@ ... | ||
| </script> | ||
| ``` | ||
| ``` | ||
| ### 2. Individual icon components | ||
| ### 2. Use individual icon components | ||
| This may be the easiest way to use an icon on a page however use this method carefully. This method will increase HTML file size and slow down performance if using a lot of icons. | ||
| **This method will bloat your HTML if using a lot of icons.** | ||
| This is the easiest way to get an icon on your page. But use it carefully. | ||
| Requirements: | ||
| * Have `@rei/cdr-icon` installed | ||
| #### Examples: | ||
| ``` | ||
| Requires: | ||
| - Install `@rei/cdr-icon` | ||
| ```vue | ||
| <template> | ||
@@ -114,17 +201,18 @@ ... | ||
| </script> | ||
| ``` | ||
| ``` | ||
| ### 3. Non-Cedar SVG | ||
| ### 3. Use non cedar svg | ||
| The CdrIcon package is simply an SVG with default attributes set for accessibility and styling. | ||
| - Any SVG markup can be used | ||
| - Any attributes added will override the defaults | ||
| - This method will increase HTML file size and slow down performance if using a lot of icons. | ||
| **This method will bloat your HTML if using a lot of icons.** | ||
| `cdr-icon` is simply an svg (with some default attributes set -- mostly for a11y and styling) and a slot. Any svg markup can go inside of it. Any attributes added will simply override the defaults. | ||
| Requirements: | ||
| None, but you might find the example below helpful. | ||
| #### Examples: | ||
| ``` | ||
| Requires: | ||
| - None | ||
| Use any valid SVG markup in the CdrIcon slot. | ||
| ```vue | ||
| <template> | ||
@@ -148,3 +236,12 @@ ... | ||
| </script> | ||
| ``` | ||
| </script> | ||
| ``` | ||
| ## Modifiers | ||
| Following variants are available to the `cdr-icon` modifier attribute: | ||
| | Value | Description | | ||
| |:------|:-----------------------| | ||
| | 'sm' | Sets icon size to 16px | | ||
| | 'md' | Sets icon size to 24px | | ||
| | 'lg' | Sets icon size to 32px | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.99%
192335
- Number of lines in readme file
- increased by67.36%
241
No dependency changes