Create LegacyMaterialIcon.vue (#76)

* Create LegacyMaterialIcon.vue

* Add style

* Add legacy icons to MaterialIcon

* Change indentation

* Remove MDI-Glasses
This commit is contained in:
Andreas E 2019-10-04 16:21:16 +02:00 committed by Simon M
parent d1feb051b8
commit 455f45161d
3 changed files with 36 additions and 26 deletions

View File

@ -1,12 +0,0 @@
<template>
<svg class="material-icons mdi-glasses" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M2.997 10a.769.769 0 0 0-.59.245.768.768 0 0 0-.17.615l.498 2.992c.08.63.667 1.148 1.262 1.148h3c.638 0 1.36-.563 1.515-1.183l1.05-3.191a.544.544 0 0 0-.083-.44c-.093-.12-.264-.186-.482-.186h-6zm4 7h-3c-1.617 0-3.04-1.257-3.24-2.86l-.498-2.992c-.107-.845.132-1.642.649-2.227A2.78 2.78 0 0 1 2.997 8h6c.835 0 1.585.348 2.059.955.119.152.217.318.296.492.425-.09.866-.09 1.292 0 .078-.175.176-.34.295-.492.474-.607 1.224-.955 2.058-.955h6c.812 0 1.572.336 2.09.921a2.78 2.78 0 0 1 .654 2.188l-.51 3.071c-.195 1.564-1.618 2.82-3.233 2.82h-3c-1.562 0-3.079-1.186-3.456-2.699l-.899-2.714a1.11 1.11 0 0 0-1.294.001l-.917 2.785C10.074 15.815 8.556 17 6.997 17zm8-7c-.217 0-.388.066-.481.185-.094.12-.116.302-.064.513l1.01 3.048c.175.691.897 1.254 1.536 1.254h3c.595 0 1.181-.518 1.255-1.108l.51-3.071a.752.752 0 0 0-.176-.576.77.77 0 0 0-.59-.245h-6z"/></svg>
</template>
<style scoped>
.mdi-glasses {
fill: #476582;
-webkit-transform: translateY(15%) !important;
-ms-transform: translateY(15%) !important;
transform: translateY(15%) !important;
}
</style>

View File

@ -1,29 +1,51 @@
<template>
<div class="material-holder">
<i class="material-icons">{{ iconName }}</i>
</div>
<div class="icon-holder">
<i v-if="legacy" class="legacy-material-icons mdi" v-bind:class="iconName"></i>
<i v-else class="material-icons">{{ iconName }}</i>
</div>
</template>
<script>
/**
* For material icon references use https://material.io/resources/icons/
* Code example: <MaterialIcon icon-name="android" />
*
* For material icon references use http://materialdesignicons.com/
* Code example: <MaterialIcon icon-name="mdi-glasses" legacy />
*/
export default {
props: ['iconName']
props: {
legacy: {
type: Boolean,
default: false
},
iconName: {
type: String,
required: true
}
}
}
</script>
<style scoped>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css");
.material-holder {
color: #476582;
margin: 0;
font-size: 0.85em;
border-radius: 3px;
display: inline;
.icon-holder {
color: #476582;
margin: 0;
font-size: 0.85em;
border-radius: 3px;
display: inline;
}
.material-icons {
font-size: 1.35em;
position: relative;
top: 0.2rem;
font-size: 1.35em;
position: relative;
top: 0.2rem;
}
.legacy-material-icons {
font-size: 1.35em;
}
</style>

View File

@ -10,7 +10,7 @@ lang: en-US
### [<MaterialIcon icon-name="update"/> Library updates](/help/guides/library-updates)
### [<MDI-Glasses/> Recently read](/help/guides/recently-read)
### [<MaterialIcon icon-name="mdi-glasses" legacy /> Recently read](/help/guides/recently-read)
### [<MaterialIcon icon-name="explore"/> Catalogues](/help/guides/catalogues)