前言:上一篇记录了iconfont的三种基本使用方法。
在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性。以下是采用icontfont的使用方式之symbol封装的icon-component组件。
//components/Icon-svg //创建 icon-component 组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: 'icon-svg', props: { iconClass: { type: String, required: true } }, computed: { iconName() { return `#icon-${this.iconClass}` } } } </script> <style> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> //引入svg组件 import IconSvg from '@/components/IconSvg' //全局注册icon-svg Vue.component('icon-svg', IconSvg) //在代码中使用 <icon-svg icon-class="password" />
参考:https://juejin.im/post/59bb864b5188257e7a427c09