# @parameter1/base-cms-marko-web-icons

> Vue/Marko icon components for BaseCMS websites

Latest version **4.80.4** (published 2024-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @parameter1/base-cms-marko-web-icons
pnpm add @parameter1/base-cms-marko-web-icons
yarn add @parameter1/base-cms-marko-web-icons
bun add @parameter1/base-cms-marko-web-icons
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.80.4 |
| Published | 2024-11-27 |
| First published | 2021-01-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 351.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jacob Bare |
| Maintainers | zarathustra323, solocommand, brandonbk, b77mills |

## Links

- npm: https://www.npmjs.com/package/@parameter1/base-cms-marko-web-icons
- Repository: https://github.com/parameter1/base-cms.git#master
- Homepage: https://github.com/parameter1/base-cms/tree/master#readme
- Issues: https://github.com/parameter1/base-cms/issues
- npm.io page: https://npm.io/package/@parameter1/base-cms-marko-web-icons

## Recent versions

- 4.80.4 (latest) — 2024-11-27
- 4.74.0 — 2024-10-29
- 4.36.8 — 2023-09-18
- 4.36.5 — 2023-08-31
- 4.27.0 — 2023-06-16
- 4.16.2 — 2023-04-19
- 4.16.1 — 2023-04-10
- 4.5.12 — 2023-02-27
- 4.1.0 — 2023-02-23
- 4.0.2 — 2023-02-21
- 4.0.0 — 2023-02-21
- 4.0.0-beta.0 — 2023-02-20
- 3.19.1 — 2022-12-19
- 3.19.0 — 2022-12-16
- 3.0.0 — 2022-08-11
- … 2 more at https://npm.io/package/@parameter1/base-cms-marko-web-icons/versions

## README

# BaseCMS Marko/Vue Icon Components
Icon components for BaseCMS websites.

## Install
Add `@parameter1/base-cms-marko-web-icons` as a dependency to your website project.

## Usage
Icons can be used on the server (as a Marko component) or the browser (as a Vue component).

### On The Server
Call the `<marko-web-icon>` component within your Marko template. The `name` input/attribute is required. For example:
```marko
<!-- Your template file -->
<marko-web-icon name="alert" />
```
See the `svg` folder for a complete list of available icons.

Optional input/attributes:
- `tag`: changes the wrapping HTML element. Default `<span>`
- `blockName`: changes the wrapping BEM block class. Default `marko-web-icon`
- `modifiers`: additional BEM modifiers (as an array) to apply the icon wrapper. Default `[]`
- `class`: an additional class name string to apply to the icon wrapper. Default `undefined `

### In The Browser
Import the icon component into your Vue component and then use it within your template. For example:
```vue
// Your Vue component
<template>
  <icon-alert />
</template>
<script>
import IconAlert from '@parameter1/base-cms-marko-web-icons/browser/alert.vue';

export default {
  components: { IconAlert },
  // The rest of your component...
}
</script>
```
See the `browser` folder for a complete list of available icons (mirrors the `svg` folder).

Optional props:
- `tag`: changes the wrapping HTML element. Default `<span>`
- `blockName`: changes the wrapping BEM block class. Default `marko-web-icon`
- `modifiers`: additional BEM modifiers (as an array) to apply the icon wrapper. Default `[]`
- `className`: an additional class name string to apply to the icon wrapper. Default `null`

### Importing Styles (SASS/SCSS)
This package comes with baseline SASS variables and styles. To use them, import them into your website's style file:
```scss
// Your main website styles file.

// Override any desired variables here...

@import "[path-to-node_modules]/marko-web-icons/scss/icons";
```

By default, a width/height of `1rem` will be applied to all icons classed with `marko-web-icon` (applied by default). In addition, the SVG will be filled with black and a ease transition will be applied. Additional (optional) modifiers include:
- `md`
- `lg`
- `xl`
- `light`
- `dark`
- `shadow`

For example, for a light, extra large icon with drop shadow, you would call the icon as follows:
```vue
// In Vue:
<template>
  <icon-alert modifiers=["xl", "light", "shadow"] />
</template>
```
```marko
// In Marko:
<marko-web-icon name="alert" modifiers=["xl", "light", "shadow"] />
```

Finally, any icon not specifically set to `light` or `dark` that also matches a brand (e.g. `facebook`) will have its brand color applied. See the `$marko-web-icon-brand-colors` map variable within `scss/_variables.scss` for a list of supported brands.

## Development
Anytime a new icon `svg` file is added (or the wrapping Vue component template changes), run the `build.js` file found in the project root. This will generate a new Vue file for the icon.

## Icon Sources
The icons used in this library are sourced from:
- [Octicons](https://octicons.github.com/)
- [Material](https://material.io/resources/icons)
- [Simple Icons](https://simpleicons.org/)

---
_Source: https://npm.io/package/@parameter1/base-cms-marko-web-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._