Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@rei/cdr-icon
Advanced tools
For the most up-to-date information, see REI Cedar documentation
name | type | default |
---|---|---|
use | string | none |
Sets the href attribute for use with SVG symbol sprite (CdrIconSprite). |
name | type | default |
---|---|---|
size | string | medium |
Modifies the icon size; values can target responsive breakpoints. Breakpoint values are: xs, sm, md, and lg. Examples: { 'small' | 'medium' | 'large' |
name | type | default |
---|---|---|
inherit-color | boolean | none |
Sets icon fill color to 'inherit'. |
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. |
Resources are available within the CdrIcon package:
@rei/cdr-accordion
cdr-accordion.css
To incorporate the required assets for a component, use the following steps:
Install the CdrIcon package using npm
in your terminal:
Terminal
npm i -S @rei/cdr-icon
main.js
// import your required css.
import '@rei/cdr-icon/dist/cdr-icon.css';
local.vue
<template>
...
<icon-arrow-down />
...
</template>
<script>
import { IconArrowDown } from '@rei/cdr-icon';
export default {
...
components: {
IconArrowDown
}
}
</script>
The CdrIcon package contains many different components:
There are 3 different options to display SVG icons on your page using the CdrIcon
package.
Requires:
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:
App.vue (base template)
<template>
<div id="main">
<cdr-icon-sprite />
<router-view></router-view> // rest of app
</div>
</template>
<script>
import { CdrIconSprite } from '@rei/cdr-icon';
...
components: {
CdrIconSprite
}
...
</script>
Child.vue (any descendant component of App.vue above)
<template>
<div>
<cdr-icon use="#caret-right" />
</div>
</template>
<script>
import { CdrIcon } from '@rei/cdr-icon';
...
components: {
CdrIcon
}
...
</script>
Requires:
@rei/cdr-icon/sprite/cdr-icon-sprite.svg
Within an individual component (there may be a better way to scale this if the code calls it in many places):
<template>
...
<cdr-icon :use="`${iconUrl}#caret-right`" />
...
</template>
<script>
// import the sprite so file-loader will do its magic
@import iconUrl from '@rei/cdr-assets/dist/cdr-icons.svg`;
export default {
...
data() {
return {
iconUrl
};
}
}
</script>
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.
Requires:
@rei/cdr-icon
<template>
...
<icon-caret-right />
<icon-clock />
...
</template>
<script>
import { IconCaretRight, IconClock } from '@rei/cdr-icon';
...
components: {
IconCaretRight,
IconClock
}
...
</script>
The CdrIcon package is simply an SVG with default attributes set for accessibility and styling.
Requires:
Use any valid SVG markup in the CdrIcon slot.
<template>
...
<cdr-icon viewBox="0 0 30 30">
<title>My icon</title>
<path d="M12 12c1.9329966 0 3.5-1.5670034 3.5-3.5C15.5 6.56700338 13.9329966 5 12 5S8.5 6.56700338 8.5 8.5c0 1.9329966 1.5670034 3.5 3.5 3.5zm6.7621385 7c-.8850139-2.8946791-3.5777143-5-6.7621387-5-3.1844245 0-5.87712493 2.1053209-6.76213876 5H18.7621385zM4 21c-.55228475 0-1-.4477153-1-1h-.00754862a9.07963802 9.07963802 0 0 1 .01314502-.1064258c.00185549-.0175393.0041644-.0349433.00691478-.0522001.43595408-3.2192393 2.56090871-5.9021068 5.45328094-7.1270196C7.26398091 11.7054407 6.5 10.191939 6.5 8.5 6.5 5.46243388 8.96243388 3 12 3c3.0375661 0 5.5 2.46243388 5.5 5.5 0 1.6919391-.763981 3.2054409-1.9657923 4.2143547 2.8923661 1.2249103 5.0173178 3.9077692 5.4532779 7.1269995.0027529.0172699.0050636.0346873.0069201.0522401A9.07834213 9.07834213 0 0 1 21.0075481 20H21c0 .5522847-.4477153 1-1 1H4z"/>
</cdr-icon>
...
</template>
<script>
@import { CdrIcon } from '@rei/cdr-icon';
...
components: {
CdrIcon
}
...
</script>
FAQs
REI Cedar Style Framework - Vue Component for Icon
The npm package @rei/cdr-icon receives a total of 10 weekly downloads. As such, @rei/cdr-icon popularity was classified as not popular.
We found that @rei/cdr-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.