diff --git a/package.json b/package.json index a00681b8..bd66a448 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.7.0", + "version": "0.7.1", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" diff --git a/src/components/Icon/SIcon.vue b/src/components/Icon/SIcon.vue index 35aeaed9..0ac7c3f5 100644 --- a/src/components/Icon/SIcon.vue +++ b/src/components/Icon/SIcon.vue @@ -25,6 +25,12 @@ export default class SIcon extends Vue { */ @Prop({ type: String, required: true }) readonly name!: string + private visible = false + + mounted (): void { + this.checkVisibility() + } + get computedClass (): string { if (!this.name) { return '' @@ -32,10 +38,6 @@ export default class SIcon extends Vue { if (this.name.startsWith('el-icon')) { return this.name } - // Check loading state of icons font - if (!((document || {}) as any).fonts.check('1em soramitsu-icons')) { - return '' - } if (!(Object.values(Icons) as Array).includes(this.name)) { console.warn(`'${this.name}' was not found`) return '' @@ -48,7 +50,37 @@ export default class SIcon extends Vue { if (this.size) { styles.fontSize = !isNaN(+this.size) ? `${this.size}px` : this.size } + if (!this.visible) { + styles.color = 'transparent' + } return styles } + + private async checkVisibility (): Promise { + const cssClass = this.computedClass + if (!cssClass) { + this.visible = false + return + } + const fonts = (document as any).fonts + if (!fonts) { + // Ignore this check if the browser has no support + this.visible = true + return + } + if (cssClass.startsWith('el-icon')) { + if (fonts.check('1em element-icons')) { + this.visible = true + return + } + } else { + if (fonts.check('1em soramitsu-icons')) { + this.visible = true + return + } + } + await new Promise(resolve => setTimeout(resolve, 50)) + await this.checkVisibility() + } }