vue项目中怎样引入图标,应用什么方�
Admin 2022-07-16 群英技术资�
在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标�
这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用�
安装� npm install --save-dev svg-sprite-loader
在安装svg-sprite-loader后,新建vue.config.js来配置依赖:
// vue.config.js const { resolve } = require('path') module.exports = { chainWebpack(config) { config .module .rule('svg') .exclude .add(resolve('src/icons')) .end() config .module .rule('icons') .test(/\.svg$/) .include .add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } }
这里通过chainWebpack来做了两项配置:
在components目录下新建一个SvgIcon.vue文件�
<template> <i class="icon"> <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) --> <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor"> <use :xlink:href="iconName" rel="external nofollow" ></use> </svg> </i> </template> <script lang="ts"> import { PropType, toRefs } from 'vue' export default { props: { size: { type: Number as PropType<number>, default: 14 }, fillColor: { type: String as PropType<string>, default: '#000' }, iconName: { type: String as PropType<string>, required: true } }, setup(props: any) { const { size, fillColor, iconName: _iconName } = toRefs(props) const iconName = `#${_iconName.value}` return { size, fillColor, iconName } } } </script>
然后,新建一个icons目录,并且新建一个index文件,用来挂在组件和引入svg图标�
// index.ts import SvgIcon from '@/components/SvgIcon.vue' import { App } from 'vue' export default (app: App) => { app.component('svg-icon', SvgIcon) } const ctx = require.context('./svg', false, /\.svg$/) const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx) requestAll(ctx)
// main.ts import { createApp } from 'vue' import App from './App.vue' import installSvgIcon from '@/icons/index' const app = createApp(App) installSvgIcon(app) app.mount('#app')
这个文件做了两件事:
首先,我们要在icons/svg目录下存放svg图标文件(在iconfont上找自己需要的);
然后,就可以在其他地方使用啦�
<template> <img alt="Vue logo" src="./assets/logo.png"> <svg-icon icon-name="icon-dashboard"></svg-icon> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> </template>
直接通过组件svg-icon的方式引入,然后传入icon-name即可,icon-name的值由icon拼接svg文件名组成�
这种自定义方式引入svg图标的方式,还是挺方便的,想要加上一个图标的时候,几步即可�
但是,修改样式时不能通过css来修改,这点就不太方便了�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
JS利用循环解决的一些常见问题总结 目录 1. 打印0-100�3的倍数 2. 在页面中写入 1000-2000年中的闰� 3. 打印100以内所有偶数的� 4.求出1-1/2+1/3-1/4…�1/100的和 5. 打印三角� 5.1 普通三角形 5.2 倒三� 5.3 等腰三角� 6.等腰梯形 7.输出100-200之间所有的质数 9. 有一个棋�,�64个方�,在第一个方格里面放1粒芝麻重量是0.00001kg,第二个里面放2�,第三个里面放4,棋盘上放的所有芝麻的重量 10.在页面上完成以一个九九乘法表 11.打印一�3�
开始学习nodejs!参考书籍:TheNodeBeginnerBook ,所有问题和讨论都围绕本书�1.学习nodejs需要具备的基础知识:js基本语法,基本上写过前端的都能满足,原生js、jquery2.nodejs与基础知识相比,学习的点在哪里?nodejs本身就是js,如下:varhttp=require("http");http.cre
这篇文章主要介绍了vue 动态生成拓扑图的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
这篇文章主要为大家详细介绍了Vue项目利用axios请求接口下载excel,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要为大家介绍了JS继承与工厂构造及原型设计模式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078