svg元件封裝

2022-06-14 04:12:09 字數 1199 閱讀 7917

檔案體積小，能夠被大量的壓縮

可無限放大而不失真(向量圖的基本特徵)

在視網膜顯示屏上效果極佳

能夠實現互動和濾鏡效果

1.安裝相應的npm包：

yarn add svg-sprite-loader svgo --dev
2.src資料夾下新建乙個icons資料夾。裡面存放svg格式的圖示。

index.js實現元件全部註冊。

1 import vue from 'vue';


2 import svgicon from '@/components/svgicon.vue'; //


svg元件34


//register globally


5 vue.component('svg-icon', svgicon);


67 const requireall = requirecontext =>requirecontext.keys().map(requirecontext);


8 const req = require.context('./svg', false, /\.svg$/);


9 requireall(req);
svgicon.vue元件：

1256


73233
3.在vue.config.js裡set svg-sprite-loader

4.別忘了在main.js中引入：

import vue from 'vue';


import 


'./icons'


;import router from './router';


import store from './store';


import './assets/styles/index.scss';


vue.config.productiontip = false


;new


vue({


router,


store,


template: '',


5.然後，就可以使用了

vue cli3 svg元件封裝

專案當中使用icon應該是很多的，比如說選單的圖示等等，其實方法有很多，我們可以使用字型圖示，我們可以使用png等，但是他們都有弊端，我們一般都會結合阿里圖示庫。png 多了就會是專案變大 雖然沒多大 一種意識性問題 2.1 準備工作 2.1.1 元件目錄結構 icons 資料夾 svg 資料夾 用...

vue動態使用svg,封裝為元件使用

0.需要安裝的庫 1.在assets檔案下建立icons資料夾 2.在components資料夾下建立svgicon元件 3.vue.config.js檔案的配置項 4.使用 基於vue cli3配置，配置檔案為vue.config.js devdependencies import vue fro...

svg基礎函式封裝

雖然已經有成熟的svg操作庫，但還是用自己的方式進行了svg基礎函式封裝。下一步，將會在這些函式的基礎上封裝乙個es5類，用於更人性化的建立svg圖形。返回指定寬高的svg標籤 function svg width,height 矩形 function rect x,y,width,height,s...