标题旁边的图像而不会破坏生成的CSS

Question

我想在标题旁边放一张图片。我当前的减价是

# Contact

#### Mail

Some text here

#### Xing

Some text here

#### Github

Some text here

#### Discord

Some text here

因此，我开始通过创建以下Vue组件来扩展这些联系人标题：

ContactItem.vue

<template>
    <div>
        <img :src="imgUrl">
        <h4>{{title}}</h4>
    </div>
</template>

<script>
export default {
    props: {
        imgUrl: String,
        title: String
    }
}
</script>

<style scoped>
    div {
        display: flex;
        align-items: center;
    }

    img {
        display: inline;
    }

    h4 {
        display: inline;
        margin-left: 5px;
    }
</style>

现在我可以在markdown文件中开始使用此组件了，例如

<ContactItem imgUrl="https://img.icons8.com/color/48/000000/discord-new-logo.png" title="Discord"/>

如果您想看看它的外观，我还创建了一个演示：

https://jsfiddle.net/a6oy5t7z/

使用此组件更新我的markdown文件时，Vuepress生成的CSS会中断。例如，它被组件div包裹，因此失去了边距。有没有办法保留Vuepress CSS？

所以我要做的就是在标题旁边有一个小图标