如何在Vue项目中使用SVG Icon

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>

我们只需要将其中<path>部分代码放到图标组件的<template>中,比如facebook.svg的放到对应的Fackbook.vue组件:

<!-- Facebook.vue -->
<template>
    <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>      
</template>

<script>
    export default {
        name:'Facebook'
    }
</script>

对于GooglePlus.vueTwitter.vue组件类似。

为了更好的演示官网提供的示例,将在components目录中新创建一个.vue文件,将引用我们创建的FacebookTwitterGooglePlus组件。该文件名暂时取名为VueOfficialSvgIcons.vue,接下来我们就可以这样使用这几个SVG图标:

<!-- VueOfficialSvgIcons.vue -->
<template>
    <div class="icons">
        <IconBox icon-name="facebook"><Facebook /></IconBox>
        <IconBox icon-name="twitter"><Twitter /></IconBox>
        <IconBox icon-name="google plus"><GooglePlus /></IconBox>
    </div>
</template>

<script>
    import IconBox from './icons/IconBox'
    import Facebook from './icons/Facebook'
    import Twitter from './icons/Twitter'
    import GooglePlus from './icons/GooglePlus'

    export default {
        name: 'VueOfficialSvgIcons',
        components: {
            IconBox,
            Facebook,
            Twitter,
            GooglePlus
        }
    }
</script>

现在看到的效果,都是默认的尺寸32px x 32px

如果我们需要多种尺寸的图标,可以像下面这样做:

<!-- VueOfficialSvgIcons.vue -->
<IconBox 
    width="16"
    height="16"
    icon-name="facebook"><Facebook /></IconBox>
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

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

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