mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Create LegacyMaterialIcon.vue (#76)
* Create LegacyMaterialIcon.vue * Add style * Add legacy icons to MaterialIcon * Change indentation * Remove MDI-Glasses
This commit is contained in:
parent
d1feb051b8
commit
455f45161d
@ -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>
|
@ -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>
|
||||
|
@ -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)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user