vertical-align: middle;
}
</style>
我们将 .svg 图标文件通过 require() 传递给 html-loader 方法，该方法会将文件字符串化，并且通过 v-html 指令将其渲染为 <svg> 元素。
所有对 <svg> 元素修改的地方都在 mounted() 生命周期方法里面。
将由 growByHeight 定义的 <svg> 元素的 height 或 width 属性设置为 1em （ font-size 的一倍）并对另一个元素使用 widthToHeight 。由于并非所有的 SVG 都是正方形的，因此我们从渲染的元素计算 withToHeight 比率，以便 SVG 在父元素的 font-size 属性大小改变的时候按比例缩放到其原始尺寸。
为了设置 <svg> 元素的 fill 属性，我们需要覆盖掉 SVG 文件内部附带的 fill 属性。当 hasFill 值为 true 的时候，我们从 <svg> 元素及其子元素中递归地删除 fill 属性。然后使用 CSS 选择器将 fill 值添加到其父元素或 <svg> 元素就可以了。
还可以向元素中添加例如 class 等其它 DOM 属性，这些属性可用于设置组件中的范围样式
创建微笑图标
让我们使用 Font Awesome 和我们的 Svg-icon 组件中的图标字体创建一个微笑图标。
使用图标字体
<template>
<i class="fas fa-smile smile-icon"></i>
</template><style lang="scss" scoped>
.smile-icon {
font-size: 24px;
color: #aaa;
&:hover {
color: #666;
}
}
</style>
.smile-icon 类的 CSS 选择器以及伪类选择器 :hover 来设置图标的 font-size 和 color 属性。
使用 Svg-icon 组件
<script>
import SvgIcon from './components/Svg-icon';export default {
name: 'my-component',
components: {
'svg-icon': SvgIcon,
},
}
</script>
<template>
<div class="smile-icon">
<svg-icon icon="smile-solid" :hasFill="true"></svg-icon>
</div>
</template>
<style lang="scss" scoped>
.smile-icon {
font-size: 24px;
fill: #aaa;
&:hover {
fill: #666;
}
}
</style>
上面的实现和图标字体方法相同，除了 .smile-icon 类在父元素中，在 Svg-icon 组件中， color 属性被替换为 fill 。我们还必须确保 smile-solid.svg 文件位于 Svg-icon 组件的 require() 方法指定的路径（ ./assets/svg/ ）中。
渲染成 HTML
这是由 v-html 的输出渲染的 HTML。注意：会删除掉所有的 fill 属性，并将 height 和 width 属性添加到 <svg> 中。
<div class="smile-icon">
<svg height="1em" width="1em" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
