如何在Vue项目中使用SVG Icon

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Web中对于Icon的使用已经是非常频繁的一件事情了,而且很有图标的使用会让你的Web应用程序或Web网页面变得更具可交互性和可使用性。早前在《Web中的图标》一文中和大家一起探讨了如何在Web中使用图标。其中不同的使用方式都具有各自的优势,但随着技术的革新,其中SVG的图标在Web中的使用也越来越频繁,并且其具备的优势也越来越明显。正因如此,在自己的项目中使用SVG的图标的场景也越来越多,因此,今天想和大家一起聊聊如何在Vue的项目中更好的使用SVG图标。

单个Icon组件的使用

在Vue官方网站专门有一节内容,向大家介绍了如何在项目中更好的使用SVG图标系统,而且这个系统是可具编辑的。先来看最基础的一个示例,这个示例是基于Vue CLI3的基础上构建的。通过官网提供的命令,使用CLI命令创建一个Vue项目,比如:

vue create svg-icon-app

采用默认的模板来构建了一个svg-icon-app项目。我们先跟着官网提供的思路来一步一步往下走,在components目录下创建一个新的目录icons。并将相应的SVG图标以一种标准化的方式命名,比如:

components/icons/IconBox.vue
components/icons/Facebook.vue
components/icons/Twitter.vue
components/icons/GooglePlus.vue

其中IconBox.vue是SVG图标的一个基础图标组件,在这个组件中使用了slot,其模板如下:

<!-- IconBox.vue -->
<template>
    <svg xmlns="http://www.w3.org/2000/svg"
        :width="width"
        :height="height"
        viewBox="0 0 18 18"
        :aria-labelledby="iconName"
        role="presentation"
    >
        <title
            :id="iconName"
            lang="en"
        >{{ iconName }} icon</title>
        <g :fill="iconColor">
            <slot />
        </g>
    </svg>
</template>

你可以像上面这样使用这个基础图标,唯一可能要做的就是根据你图标的viewBox来更新其viewBox。在基础图标组件里会有widthheighticonColor以及iconNameprops,这样我们就可以通过props对其动态更新。iconName将会同时用在<title>的内容及其用于提供可访问性的id上。

<!-- IconBox.vue -->
<script>
    export default {
        name: 'IconBox',
        props: {
            iconName: {
                type: String,
                default: 'box'
            },
            width: {
                type: [Number, String],
                default: 32
            },
            height: {
                type: [Number, String],
                default: 32
            },
            iconColor: {
                type: String,
                default: 'currentColor'
            }
        },
        data () {
            return {

            }
        }
    }
</script>

currentColor会成为fill的默认值,于是图标就会继承color的值(currentColor是CSS的一个很优秀的属性)。我们也可以根据需求传递一个不一样的颜色值。

特别声明,viewBox是SVG中的一个重要的概念,如果你从未接触过的话,建议你花点时间对该概念进行了解。你可以点击这里、或这里、还有这里进行了解。

IconBox组件完成了之后,接下来把对应的图标组件完善。

示例中的几个图标,都来自于Font Awesome提供的SVG图标。

除此之外,还可以通过iconmonstrIcoMoon平台,甚至还可以使用NucleoApp来获取SVG图标。特别是NucleoApp来管理你的SVG图标:

我们通过编辑器打开其中一个.svg文件,比如facebook.svg,其代码会是这样的:

<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="svg-inline--fa fa-facebook-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path d="M29,0 L3,0 C1.35,0 0,1.35 0,3 L0,29 C0,30.65 1.35,32 3,32 L16,32 L16,18 L12,18 L12,14 L16,14 L16,12 C16,8.69375 18.69375,6 22,6 L26,6 L26,10 L22,10 C20.9,10 20,10.9 20,12 L20,14 L26,14 L25,18 L20,18 L20,32 L29,32 C30.65,32 32,30.65 32,29 L32,3 C32,1.35 30.65,0 29,0 Z" id="Path"></path>   
</svg>

我们只需要将其中

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/svg-icon-in-vue.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部