<template> <DocSectionText v-bind="$attrs"> <p>Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p> </DocSectionText> <InputText v-model="filter" class="w-full p-3 mt-3 mb-4" placeholder="Search an icon" /> <div class="card"> <div class="grid text-center"> <div v-for="icon of filteredIcons" :key="icon.properties.name" class="col-12 md:col-2 mb-5"> <i :class="'text-2xl mb-3 text-color-secondary pi pi-' + icon.properties.name"></i> <div>pi-{{ icon.properties.name }}</div> </div> </div> </div> </template> <script> import { IconService } from '@/service/IconService'; export default { data() { return { icons: null, filter: null }; }, mounted() { IconService.getIcons().then((data) => { let d_data = data; let d_icons = d_data.filter((value) => { return value.icon.tags.indexOf('deprecate') === -1; }); d_icons.sort((icon1, icon2) => { if (icon1.properties.name < icon2.properties.name) return -1; else if (icon1.properties.name < icon2.properties.name) return 1; else return 0; }); this.icons = d_icons; }); }, computed: { filteredIcons() { if (this.filter) return this.icons.filter((icon) => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1); else return this.icons; } } }; </script>