# @dbetka/vue-material-symbols

> Vue3 Material Design Symbols

Latest version **1.2.0** (published 2024-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dbetka/vue-material-symbols
pnpm add @dbetka/vue-material-symbols
yarn add @dbetka/vue-material-symbols
bun add @dbetka/vue-material-symbols
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-09-06 |
| First published | 2023-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | dbetka |
| Maintainers | dbetka |
| Keywords | icons, symbols, material, design, vue, vue3, dbetka, @dbetka, dbetka, google |

## Links

- npm: https://www.npmjs.com/package/@dbetka/vue-material-symbols
- Repository: https://github.com/dbetka/vue-material-symbols
- Homepage: https://github.com/dbetka/vue-material-symbols#readme
- Issues: https://github.com/dbetka/vue-material-symbols/issues
- npm.io page: https://npm.io/package/@dbetka/vue-material-symbols

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.11
- [material-symbols](https://npm.io/package/material-symbols.md) ^0.14.2

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2024-09-06
- 1.1.8 — 2024-08-28
- 1.1.7 — 2024-08-26
- 1.1.6 — 2023-12-09
- 1.1.5 — 2023-12-09
- 1.1.4 — 2023-12-09
- 1.1.3 — 2023-12-09
- 1.1.2 — 2023-12-09
- 1.0.3 — 2023-12-01
- 1.0.2 — 2023-12-01
- 1.0.1 — 2023-12-01

## README

# vue-material-symbols
> Vue3 material design symbols fully typed component. 
> Works well with TypeScript and JavaScript. 
> Provides easy customization by CSS classes.
> Fonts based on https://fonts.google.com/icons.

[![npm version](https://badge.fury.io/js/%40dbetka%2Fvue-material-symbols.svg)](https://badge.fury.io/js/%40dbetka%2Fvue-material-symbols)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Demo

[Open demo](https://dbetka.github.io/vue-material-symbols/)

## How to start

### Installation
```bash
npm install @dbetka/vue-material-symbols
```

### Setup in a project with default configuration

Add as Vue3 plugin:
```js
import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin);
// defaultType: 'outlined',
// defaultWeight: '300',
// defaultGrade:  'medium',
// defaultSize: 24,
// defaultFilled: false,
```

### Setup in project with configuration

```js
import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin, {
  defaultWeight: '100',
  defaultGrade: 'thin',
  defaultSize: 24,
  defaultType: 'outlined',
  defaultFilled: false,
});
```

### Setup in project with responsive size

```js
import materialSymbolsPlugin from '@dbetka/vue-material-symbols';
import 'material-symbols/index.css';

const app = createApp(App);
app.use(materialSymbolsPlugin, {
  defaultSize: '1.5em',
});
```


## Usage

### Base examples
```vue
<script setup>
  import { MaterialSymbol } from '@dbetka/vue-material-symbols';
</script>
<template>
  <div>
    <MaterialSymbol name="delete" />
    <MaterialSymbol name="delete" filled />
    <MaterialSymbol name="delete" type="outlined" />
    <MaterialSymbol name="delete" type="rounded" />
    <MaterialSymbol name="delete" type="sharp" />
    <MaterialSymbol name="delete" size="26" />
  </div>
</template>
```

### Usage in Composition API
```vue
<script setup lang="ts">
  import { MaterialSymbol, SymbolsProp } from '@dbetka/vue-material-symbols';
  import { computed } from 'vue';

  const props = defineProps({
    done: Boolean,
  });

  const symbolName = computed<SymbolsProp>(() => props.done ? 'done' : 'hourglass_empty')
</script>
<template>
  <div>
    <MaterialSymbol :name="symbolName" />
  </div>
</template>
```
Or without TypeScript:
```vue
<script setup>
  import { useSymbols, MaterialSymbol } from '@dbetka/vue-material-symbols';
  import { computed } from 'vue';

  const props = defineProps({
    done: Boolean,
  });

  const symbols = useSymbols()
  const symbolName = computed(() => props.done ? symbols.names.done : symbols.names.hourglass_empty)
</script>
<template>
  <div>
    <MaterialSymbol :name="symbolName" />
  </div>
</template>
```

## Own styles

### Set icon color

Component with CSS example:
```vue
<script setup>
  import { MaterialSymbol } from '@dbetka/vue-material-symbols';
</script>
<template>
  <div>
    <MaterialSymbol name="delete" class="red"/>
  </div>
</template>

<style>
.red {
   color: red;
}
</style>
```

## Symbols metadata

Access to symbols metadata:
```vue
<script setup lang="ts">
  import { metadata } from '@dbetka/vue-material-symbols/dist/metadata';
  import { computed } from 'vue';
  
  /*** SymbolMetadata
    name: string
    version: number
    popularity: number
    codepoint: number
    categories: string[]
    tags: string[]
   */
  
  const symbolsSortedByPopularity = computed(() => metadata.sort((a, b) => b.popularity - a.popularity))
</script>
<template>
  <div>
    <MaterialSymbol v-for="symbol of symbolsSortedByPopularity" :key="symbol.name" :name="symbol.name" />
  </div>
</template>
```

---
_Source: https://npm.io/package/@dbetka/vue-material-symbols · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._