@dbetka/vue-material-symbols
v1.2.0
Published
Vue3 Material Design Symbols
Downloads
257
Maintainers
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.
Demo
How to start
Installation
npm install @dbetka/vue-material-symbols
Setup in a project with default configuration
Add as Vue3 plugin:
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
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
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
<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
<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:
<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:
<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:
<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>