How to use SVG for uniapp? It’s effective for personal testing!

Time:2022-3-12

Login iconfont

The required icon will be displayedAdd to cartHow to use SVG for uniapp? It's effective for personal testing!

Click on the shopping cart,Add to projectHow to use SVG for uniapp? It's effective for personal testing!

Resource Management – > my projectHow to use SVG for uniapp? It's effective for personal testing!How to use SVG for uniapp? It's effective for personal testing!
How to use SVG for uniapp? It's effective for personal testing!
newly buildComponent iconfont, and decompress the compressed package just downloaded toiconfontComponent directoryHow to use SVG for uniapp? It's effective for personal testing!

iconfont.vue

<template>
    <text class="iconfont" :class="name" :style="[{color: color}]" @click="$emit('click', $event)"></text>
</template>

<script>
    export default {
        props: {
            name: String,
            color: String
        }
    }
</script>

<style scoped>
@import url("./iconfont.css");

.iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}
</style>



Now the component is made. How to use it:

<iconfont name="shaixuan"></iconfont>

nameAttributes refer to the following
How to use SVG for uniapp? It's effective for personal testing!

Recommended Today

Why didn’t the looper’s polling loop in the main thread block the main thread?

Main thread activitythread [source code] public static void main(String[] args) { Trace.traceBegin(Trace.TRACE_TAG_ACTIVITY_MANAGER, “ActivityThreadMain”); // CloseGuard defaults to true and can be quite spammy. We // disable it here, but selectively enable it later (via // StrictMode) on debug builds, but using DropBox, not logs. CloseGuard.setEnabled(false); Environment.initForCurrentUser(); // Set the reporter for event logging in libcore […]